Image এবং Content যুক্ত Cards

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

Image এবং Content যুক্ত Card তৈরি করা

Materialize CSS এ একটি card তৈরি করার জন্য আপনি card ক্লাস ব্যবহার করবেন এবং এতে প্রয়োজনীয় উপাদানগুলো যোগ করবেন, যেমন image, heading, paragraph, এবং button।

Basic Card Structure

<div class="card">
  <div class="card-image">
    <img src="image.jpg" alt="Card Image">
    <span class="card-title">Card Title</span>
  </div>
  <div class="card-content">
    <p>This is a simple card with an image and content.</p>
  </div>
  <div class="card-action">
    <a href="#">Read More</a>
  </div>
</div>

এখানে:

• card: এটি একটি সাধারণ card তৈরি করতে ব্যবহৃত।
• card-image: এখানে image বা ছবি প্রদর্শিত হবে।
• card-title: এটি কার্ডের শিরোনাম প্রদর্শন করে।
• card-content: এখানে টেক্সট বা কন্টেন্ট থাকবে।
• card-action: এটি লিঙ্ক বা বাটন ধারণ করবে, যা ব্যবহারকারীকে আরও তথ্য দেখাতে সাহায্য করবে।

Image এবং Content যুক্ত Card এর বৈশিষ্ট্য:

1. Image Section:
   • card-image ক্লাসের মাধ্যমে আপনি একটি ইমেজ যোগ করতে পারেন। ইমেজটি কার্ডের উপরের অংশে থাকবে এবং এটি রেসপন্সিভ (responsive) হবে।
   • ছবির উপরে card-title দিয়ে একটি শিরোনাম যোগ করা যায়, যা ছবির উপর ভাসমান অবস্থায় থাকবে।
2. Content Section:
   • card-content ক্লাসে আপনি টেক্সট বা প্যারাগ্রাফ যুক্ত করতে পারেন। এখানে আপনি কন্টেন্টের সাথে আরও কিছু তথ্য যেমন বুলেট পয়েন্ট, তালিকা বা সাধারণ টেক্সটও রাখতে পারেন।
3. Action Section:
   • card-action এ আপনি একটি লিঙ্ক বা বাটন যোগ করতে পারেন যা ব্যবহারকারীকে আরও বিস্তারিত কন্টেন্টের দিকে নিয়ে যেতে সহায়তা করবে। আপনি লিঙ্কের মাধ্যমে অন্য কোনো পেজ বা সেকশনে রিডাইরেক্ট করতে পারেন।

Advanced Image এবং Content Card with Icons and Buttons

এখন আমরা একটি উন্নত image এবং content যুক্ত card তৈরি করব, যা icons, buttons এবং links ধারণ করবে। এটি একটি ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব উপাদান হবে।

উদাহরণ:

<div class="card">
  <div class="card-image">
    <img src="https://via.placeholder.com/300" alt="Card Image">
    <span class="card-title">Nature Image</span>
  </div>
  <div class="card-content">
    <p>This card contains an image of nature with a description below.</p>
  </div>
  <div class="card-action">
    <a href="#">Learn More</a>
    <a href="#"><i class="material-icons">favorite</i> Like</a>
    <a href="#" class="btn-small waves-effect waves-light">Share</a>
  </div>
</div>

এখানে:

• card-image: ইমেজের উপরে শিরোনাম (card-title) দেওয়া হয়েছে।
• card-content: একটি সাধারণ প্যারাগ্রাফ সহ কন্টেন্ট যোগ করা হয়েছে।
• card-action:
  • "Learn More" লিঙ্ক যা ব্যবহারকারীকে আরও তথ্য দেখাতে নিয়ে যাবে।
  • "Like" আইকন সহ একটি লিঙ্ক ব্যবহার করা হয়েছে যা Material Icons থেকে একটি আইকন প্রদান করে।
  • Share বাটন যা একটি ইন্টারঅ্যাকটিভ বাটন এবং waves-effect ক্লাস সহ রঙ পরিবর্তন করে।

Card এর বিভিন্ন বৈশিষ্ট্য:

1. Icons:
   • Materialize CSS এর Material Icons ব্যবহার করে কার্ডে আইকন যোগ করা যায়। যেমন এখানে favorite আইকনটি ব্যবহার করা হয়েছে।
   • আইকনগুলি গ্রাফিক্যাল উপস্থাপনা বৃদ্ধি করে এবং ব্যবহারকারীদের জন্য আরও সহজবোধ্য করে তোলে।
2. Buttons:
   • আপনি small, large, floating বা অন্যান্য waves-effect স্টাইলের বাটনও যোগ করতে পারেন, যা কাস্টমাইজড ও ইন্টারঅ্যাকটিভ হয়।
3. Responsive Layout:
   • Materialize CSS এর responsive গ্রিড সিস্টেমের মাধ্যমে এই কার্ডগুলি যেকোনো ডিভাইসে সুন্দরভাবে প্রদর্শিত হবে। এটি card-columns ব্যবহার করে বিভিন্ন ডিভাইসের জন্য আদর্শ উপস্থাপন নিশ্চিত করে।

Multiple Cards in Grid Layout

যদি আপনি একাধিক card একই পেজে প্রেজেন্ট করতে চান, তবে Materialize CSS এর গ্রিড সিস্টেম ব্যবহার করে একাধিক card সরলভাবে সাজানো সম্ভব।

উদাহরণ:

<div class="row">
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://via.placeholder.com/200" alt="Card Image">
        <span class="card-title">Card 1</span>
      </div>
      <div class="card-content">
        <p>This is card number 1 with an image.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://via.placeholder.com/200" alt="Card Image">
        <span class="card-title">Card 2</span>
      </div>
      <div class="card-content">
        <p>This is card number 2 with an image.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://via.placeholder.com/200" alt="Card Image">
        <span class="card-title">Card 3</span>
      </div>
      <div class="card-content">
        <p>This is card number 3 with an image.</p>
      </div>
    </div>
  </div>
</div>

এখানে:

• row: এই ক্লাসটি একাধিক cardsকে একটি গ্রিড লেআউটে সজ্জিত করতে সাহায্য করে।
• col s12 m6 l4: প্রতিটি কলামকে ছোট স্ক্রীনে পূর্ণ, মিডিয়াম স্ক্রীনে অর্ধেক এবং বড় স্ক্রীনে এক তৃতীয়াংশ আকারে প্রদর্শন করা হয়।

উপসংহার

Materialize CSS এর মাধ্যমে আপনি সহজেই image এবং content যুক্ত cards তৈরি করতে পারেন। এই cards ওয়েবসাইটের ডিজাইনকে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। আপনি বিভিন্ন content, icons, এবং buttons ব্যবহার করে কার্ডগুলিকে আরও ব্যবহারকারী-বান্ধব এবং মোডার্ন করে তুলতে পারেন। Responsive layout এবং grid system ব্যবহার করে আপনি যেকোনো ডিভাইসে এই কার্ডগুলির উপস্থাপনা নিশ্চিত করতে পারবেন।