Materialize এর Cards এর ব্যবহার

Materialize CSS ফ্রেমওয়ার্কটি cards তৈরির জন্য অত্যন্ত জনপ্রিয় এবং এটি ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করতে সহায়তা করে। Cards হল একটি কন্টেইনার যা বিভিন্ন কন্টেন্ট ধারণ করে, যেমন টেক্সট, ইমেজ, লিঙ্ক, বাটন ইত্যাদি। Materialize CSS এর cards গুলো খুবই সিম্পল এবং রেসপন্সিভ, যা যেকোনো স্ক্রীনে সুন্দরভাবে কাজ করে।

এটি Google Material Design এর একটি গুরুত্বপূর্ণ উপাদান, যার মাধ্যমে ওয়েব পেজে কন্টেন্টকে একটি স্টাইলিশ ও সুশৃঙ্খলভাবে উপস্থাপন করা যায়।

Materialize এর Cards এর বৈশিষ্ট্য

• Responsive: Cards বিভিন্ন স্ক্রীন সাইজে রেসপন্সিভভাবে প্রদর্শিত হয়, যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপে সুন্দরভাবে উপস্থাপিত হয়।
• Customizable: Materialize এর cards সম্পূর্ণ কাস্টমাইজ করা যায়, যেমন প্যাডিং, মার্জিন, রঙ, শ্যাডো, বর্ডার রেডিয়াস ইত্যাদি।
• Interactive: Cards তে buttons, links, icons এবং actions যোগ করে ইন্টারঅ্যাকটিভ ফিচারও যোগ করা যায়।

Materialize Cards এর প্রাথমিক ব্যবহার

Materialize CSS এ cards তৈরি করার জন্য আপনাকে card ক্লাস ব্যবহার করতে হবে। নিচে একটি সাধারণ উদাহরণ দেখানো হলো:

<div class="card">
  <div class="card-image">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <span class="card-title">Card Title</span>
  </div>
  <div class="card-content">
    <p>This is some content inside the card.</p>
  </div>
  <div class="card-action">
    <a href="#">Link</a>
    <a href="#">Another Link</a>
  </div>
</div>

এখানে:

• card-image ক্লাসে ছবি যোগ করা হয়েছে।
• card-content ক্লাসে টেক্সট কন্টেন্ট যুক্ত করা হয়েছে।
• card-action ক্লাসে লিঙ্কগুলি (action) যোগ করা হয়েছে।

Card Variations

Materialize CSS এ cards কাস্টমাইজ করার জন্য বিভিন্ন ধরণের বৈশিষ্ট্য ব্যবহার করা যায়।

Basic Card with Image

<div class="card">
  <div class="card-image">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <span class="card-title">Card with Image</span>
  </div>
  <div class="card-content">
    <p>This is a simple card with an image.</p>
  </div>
</div>

• এখানে card-image ক্লাসের মাধ্যমে একটি ছবি যোগ করা হয়েছে।

Card with Action Buttons

<div class="card">
  <div class="card-content">
    <span class="card-title">Card with Buttons</span>
    <p>This card has some action buttons.</p>
  </div>
  <div class="card-action">
    <a href="#">Action 1</a>
    <a href="#">Action 2</a>
  </div>
</div>

• card-action ক্লাসের মাধ্যমে আপনি action buttons বা links যুক্ত করতে পারবেন।

Card with Header and Footer

<div class="card">
  <div class="card-header">
    <h5>Card Header</h5>
  </div>
  <div class="card-content">
    <p>This card has both header and footer.</p>
  </div>
  <div class="card-footer">
    <button class="btn">Click Me</button>
  </div>
</div>

• এখানে card-header এবং card-footer ক্লাসের মাধ্যমে আপনি header এবং footer যোগ করতে পারবেন।

Card Styling and Customization

Materialize CSS এর cards ক্লাসের স্টাইল কাস্টমাইজ করা যায় যেমন, রঙ, শ্যাডো, বর্ডার রেডিয়াস ইত্যাদি। এটি ব্যবহারকারীর ইন্টারফেসে আরও সুন্দর ও ফাংশনাল উপস্থাপন তৈরি করতে সহায়ক।

Example with Custom Styles:

<div class="card" style="border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
  <div class="card-image">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <span class="card-title">Custom Styled Card</span>
  </div>
  <div class="card-content">
    <p>This card has custom styling with rounded corners and a shadow.</p>
  </div>
</div>

• এখানে style অ্যাট্রিবিউট ব্যবহার করে border-radius এবং box-shadow যোগ করা হয়েছে, যা কার্ডের রঙ ও শ্যাডো পরিবর্তন করে।

Cards with Horizontal Layout

Materialize CSS এ আপনি horizontal layout ব্যবহার করেও cards তৈরি করতে পারেন, যেখানে image এবং content একে অপরের পাশে থাকে।

Horizontal Card Example

<div class="card horizontal">
  <div class="card-image">
    <img src="https://via.placeholder.com/150" alt="Card Image">
  </div>
  <div class="card-stacked">
    <div class="card-content">
      <p>This is a horizontal card layout.</p>
    </div>
    <div class="card-action">
      <a href="#">Action 1</a>
      <a href="#">Action 2</a>
    </div>
  </div>
</div>

• horizontal ক্লাস ব্যবহার করে cards এর লেআউটকে অনুভূমিকভাবে সাজানো হয়েছে।

Card Collections

Materialize CSS card collections ব্যবহার করে একাধিক কার্ডকে একটি গ্রুপে সাজানো যায়। এটি ডাইনামিক কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন প্রোডাক্ট লিস্ট, ব্লগ পোস্ট ইত্যাদি।

Card Collection Example

<div class="collection">
  <a href="#" class="collection-item">Card 1</a>
  <a href="#" class="collection-item">Card 2</a>
  <a href="#" class="collection-item">Card 3</a>
</div>

• এখানে collection ক্লাস ব্যবহার করে একাধিক cards এর লিঙ্কগুলো সাজানো হয়েছে।

উপসংহার

Materialize CSS এর cards ওয়েবসাইট ডিজাইনে অত্যন্ত কার্যকরী একটি উপাদান। এটি বিভিন্ন ধরনের কন্টেন্ট যেমন টেক্সট, ছবি, লিঙ্ক, এবং বাটন ধারণ করতে সক্ষম এবং responsive ও modern ডিজাইনের মাধ্যমে যে কোনও স্ক্রীনে উপযুক্তভাবে প্রদর্শিত হয়। Materialize এর card ক্লাসগুলি কাস্টমাইজ এবং স্টাইল করা খুবই সহজ, যা আপনার ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ফাংশনাল করে তোলে।