Bulma এর Card Component ব্যবহার

Bulma ফ্রেমওয়ার্কে Card Component একটি শক্তিশালী এবং লাইটওয়েট উপাদান যা কন্টেন্টকে একটি নির্দিষ্ট বক্সের মধ্যে উপস্থাপন করতে ব্যবহৃত হয়। এটি সাধারণত প্রোডাক্টের বিস্তারিত, ব্লগ পোস্ট, প্রোফাইল ইত্যাদি প্রদর্শনের জন্য ব্যবহৃত হয়। Bulma এর Card কম্পোনেন্টটি খুবই কাস্টমাইজযোগ্য এবং রেসপনসিভ, যা বিভিন্ন ধরনের কন্টেন্ট সন্নিবেশ করতে পারে যেমন টেক্সট, ইমেজ, বাটন ইত্যাদি।

১. Card Structure (কার্ডের গঠন)

Bulma-তে Card কম্পোনেন্ট তিনটি মূল অংশে বিভক্ত:

• Card Header: কার্ডের উপরের অংশ, যা সাধারণত টাইটেল বা অন্য কোনো গুরুত্বপূর্ণ তথ্য ধারণ করে।
• Card Content: কার্ডের মূল কন্টেন্ট, যেমন টেক্সট, ইমেজ বা অন্য উপাদান।
• Card Footer: কার্ডের নিচের অংশ, যেখানে অতিরিক্ত লিঙ্ক বা বাটন থাকে।

২. Basic Card Example (বেসিক কার্ড উদাহরণ)

নিচে একটি সাধারণ Card কম্পোনেন্টের উদাহরণ দেওয়া হল:

<div class="card">
  <div class="card-header">
    <p class="card-header-title">
      Card Title
    </p>
  </div>
  <div class="card-content">
    <div class="content">
      This is some content inside a card. You can add more text, images, and other elements here.
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="card-footer-item">Footer Link 1</a>
    <a href="#" class="card-footer-item">Footer Link 2</a>
  </div>
</div>

এখানে:

• card: এটি পুরো কার্ড কম্পোনেন্টের কন্টেইনার।
• card-header: কার্ডের উপরের অংশ যেখানে টাইটেল থাকে।
• card-content: কার্ডের মূল কন্টেন্ট।
• card-footer: কার্ডের নিচের অংশ যেখানে লিঙ্ক বা বাটন থাকে।

৩. Card with Image (কার্ডে ইমেজ যোগ করা)

আপনি কার্ডে ইমেজও যোগ করতে পারেন। ইমেজটি সাধারণত card-image ক্লাস ব্যবহার করে যুক্ত করা হয়।

উদাহরণ:

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://via.placeholder.com/400" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
      This card contains an image.
    </div>
  </div>
</div>

এখানে:

• card-image: ইমেজের জন্য কন্টেইনার।
• figure এবং image is-4by3: ইমেজের অনুপাত ঠিক করার জন্য ব্যবহৃত হয়।

৪. Card with a Button (কার্ডে বাটন যোগ করা)

কার্ডের মধ্যে বাটন যোগ করতে, আপনি card-footer-item ক্লাস ব্যবহার করতে পারেন, অথবা button ক্লাস সরাসরি card-content অংশে প্রয়োগ করতে পারেন।

উদাহরণ:

<div class="card">
  <div class="card-header">
    <p class="card-header-title">
      Card with Button
    </p>
  </div>
  <div class="card-content">
    <div class="content">
      This card contains a button.
    </div>
    <div class="buttons">
      <button class="button is-primary">Click Me</button>
    </div>
  </div>
</div>

এখানে:

• buttons: একাধিক বাটন রাখার জন্য কন্টেইনার।
• button is-primary: প্রাইমারি বাটন তৈরি করতে ব্যবহৃত ক্লাস।

৫. Card with Multiple Columns (একাধিক কলাম সহ কার্ড)

Bulma এর columns এবং column ক্লাস ব্যবহার করে আপনি একটি কার্ডের মধ্যে একাধিক কলাম তৈরি করতে পারেন।

উদাহরণ:

<div class="card">
  <div class="card-content">
    <div class="columns">
      <div class="column is-half">
        <div class="content">
          First column content.
        </div>
      </div>
      <div class="column is-half">
        <div class="content">
          Second column content.
        </div>
      </div>
    </div>
  </div>
</div>

এখানে columns এবং column is-half ব্যবহার করে দুইটি কলাম তৈরি করা হয়েছে, যেগুলি প্রতিটি ৫০% প্রস্থ নেবে।

৬. Card with Header, Footer and Links (কার্ডে হেডার, ফুটার এবং লিঙ্ক)

Bulma-তে আপনি card-footer-item ক্লাস ব্যবহার করে কার্ডের ফুটারে একাধিক লিঙ্ক যোগ করতে পারেন। এর মাধ্যমে আপনি কার্ডের নিচে অতিরিক্ত তথ্য যেমন লিঙ্ক, সেবা বা অন্য অ্যাকশন যোগ করতে পারেন।

উদাহরণ:

<div class="card">
  <div class="card-header">
    <p class="card-header-title">
      Card with Footer Links
    </p>
  </div>
  <div class="card-content">
    <div class="content">
      This card contains a footer with links.
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="card-footer-item">Link 1</a>
    <a href="#" class="card-footer-item">Link 2</a>
    <a href="#" class="card-footer-item">Link 3</a>
  </div>
</div>

এখানে:

• card-footer-item: ফুটারে প্রতিটি লিঙ্ককে সজ্জিত করার জন্য ব্যবহৃত ক্লাস।

৭. Card with Image, Content, and Footer

একটি সম্পূর্ণ কার্ড যাতে ইমেজ, কন্টেন্ট এবং ফুটার থাকে, সেজন্য নিচের উদাহরণটি দেখা যায়:

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://via.placeholder.com/400" alt="Image">
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
      This is a card with an image, content, and footer.
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="card-footer-item">More Info</a>
    <a href="#" class="card-footer-item">Share</a>
  </div>
</div>

এখানে:

• card-image: ইমেজের জন্য কন্টেইনার।
• card-content: কার্ডের মূল কন্টেন্ট।
• card-footer: লিঙ্ক বা অ্যাকশন বাটন প্রদর্শনের জন্য।

সারাংশ

Bulma এর Card কম্পোনেন্টটি একটি অত্যন্ত কাস্টমাইজযোগ্য এবং রেসপনসিভ উপাদান যা টেক্সট, ইমেজ, বাটন এবং লিঙ্ক সহ বিভিন্ন কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এটি Card Header, Card Content, এবং Card Footer এর মাধ্যমে তিনটি মূল অংশে বিভক্ত থাকে, এবং এই অংশগুলোকে বিভিন্নভাবে কাস্টমাইজ করা যায়। Card কম্পোনেন্টের মধ্যে ফ্লেক্সবক্স সিস্টেম, কলাম সিস্টেম এবং অন্যান্য স্টাইল ব্যবহার করে অত্যন্ত কার্যকরী এবং সুন্দর ডিজাইন তৈরি করা সম্ভব।