Bulma ফ্রেমওয়ার্কের Card component একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব উপাদান যা বিভিন্ন ধরণের কন্টেন্ট উপস্থাপন করার জন্য ডিজাইন করা হয়েছে। Card কম্পোনেন্টে আপনি সহজেই ছবি, টেক্সট কন্টেন্ট, ফুটার এবং আরও অনেক কিছু যুক্ত করতে পারেন। এটি সাধারণত একটি বক্সের মতো কাজ করে যা বিভিন্ন উপাদানকে সজ্জিত এবং প্রদর্শন করতে ব্যবহৃত হয়।
Bulma তে Card এর মধ্যে তিনটি মূল অংশ থাকে:
- Card Image
- Card Content
- Card Footer
এগুলি একে অপরের সাথে সন্নিবেশিত হয়ে একটি সুন্দর এবং কার্যকরী লেআউট তৈরি করে।
১. Card Layout
Bulma এর Card কম্পোনেন্ট খুবই সহজে কাস্টমাইজ করা যায়। একটি কার্ড সাধারণত একটি card ক্লাসের মাধ্যমে তৈরি করা হয় এবং এর মধ্যে card-image, card-content, এবং card-footer ক্লাসগুলোর মাধ্যমে উপাদানগুলো সাজানো হয়।
উদাহরণ: Card Layout
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://via.placeholder.com/300" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">Card Title</p>
<p class="subtitle is-6">Card Subtitle</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac erat sit amet urna scelerisque fermentum.
</div>
</div>
<div class="card-footer">
<a href="#" class="card-footer-item">Footer Item 1</a>
<a href="#" class="card-footer-item">Footer Item 2</a>
<a href="#" class="card-footer-item">Footer Item 3</a>
</div>
</div>
এখানে:
card: কার্ড কম্পোনেন্টের মূল কন্টেইনার।card-image: কার্ডের মধ্যে একটি ছবি যোগ করার জন্য।card-content: কার্ডের কন্টেন্ট যোগ করার জন্য।card-footer: কার্ডের নীচে ফুটার (যেখানে লিঙ্ক বা অন্যান্য উপাদান থাকতে পারে)।
২. Card Image
কার্ডের ছবি বা card-image অংশে সাধারণত একটি img ট্যাগ ব্যবহার করা হয়, যা কার্ডের শীর্ষে অবস্থান করে। Bulma তে আপনি figure এবং image ক্লাস ব্যবহার করে ছবির আকার নিয়ন্ত্রণ করতে পারেন।
উদাহরণ: Card Image
<div class="card-image">
<figure class="image is-4by3">
<img src="https://via.placeholder.com/400x300" alt="Image">
</figure>
</div>
এখানে:
figure: Bulma তে ছবি সন্নিবেশ করতে ব্যবহৃত ক্লাস।image: ছবির আকার নির্ধারণ করতে ব্যবহৃত ক্লাস।is-4by3ক্লাস ব্যবহার করে ছবির অদ্বিতীয় অনুপাত নির্ধারণ করা হয়েছে (4:3)।
৩. Card Content
card-content অংশে কার্ডের মূল কন্টেন্ট যেমন শিরোনাম, সাবটাইটেল, বর্ণনা ইত্যাদি থাকে। এখানে আপনি সাধারণ HTML ট্যাগ যেমন p, h1, h2 ব্যবহার করে কন্টেন্ট যোগ করতে পারেন।
উদাহরণ: Card Content
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">Card Title</p>
<p class="subtitle is-6">Card Subtitle</p>
</div>
</div>
<div class="content">
This is the content of the card. You can add text, images, or any other elements here. It will wrap nicely within the card.
</div>
</div>
এখানে:
media: একটি ক্লাস যা কলাম-ভিত্তিক স্ট্রাকচার তৈরি করে।titleএবংsubtitle: Bulma এর টেক্সট স্টাইলিং ক্লাস যা শিরোনাম এবং সাবটাইটেল তৈরির জন্য ব্যবহৃত হয়।content: সাধারণ টেক্সট বা অন্যান্য কন্টেন্ট উপাদান রাখার জন্য ব্যবহৃত ক্লাস।
৪. Card Footer
card-footer কার্ডের নিচের অংশে থাকে, যেখানে আপনি লিঙ্ক বা অন্যান্য ইন্টারেক্টিভ উপাদান রাখতে পারেন। এখানে সাধারণত card-footer-item ক্লাস ব্যবহার করা হয়।
উদাহরণ: Card Footer
<div class="card-footer">
<a href="#" class="card-footer-item">Read More</a>
<a href="#" class="card-footer-item">Share</a>
<a href="#" class="card-footer-item">Comment</a>
</div>
এখানে:
card-footer: কার্ডের ফুটার কন্টেইনার।card-footer-item: ফুটারের আইটেম, যা সাধারণত লিঙ্ক বা বোতাম হিসেবে কাজ করে।
৫. Card এর কাস্টমাইজেশন
Bulma এর Card component কাস্টমাইজযোগ্য। আপনি ফ্লেক্সবক্স, গ্রিড সিস্টেম, টেক্সট সাইজ, রঙ এবং বর্ডার কাস্টমাইজ করতে পারেন। Bulma এর ফ্লেক্সবক্স সিস্টেমের মাধ্যমে আপনি কার্ডের ভিতরের কন্টেন্টের অ্যালাইনমেন্ট এবং সাইজ নিয়ন্ত্রণ করতে পারেন।
উদাহরণ: Card এর কাস্টম ডিজাইন
<div class="card">
<div class="card-image">
<figure class="image is-16by9">
<img src="https://via.placeholder.com/600x400" alt="Image">
</figure>
</div>
<div class="card-content">
<p class="title is-5 has-text-centered">Centered Card Title</p>
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.
</p>
</div>
</div>
এখানে:
has-text-centered: টেক্সট সেন্টার করার জন্য ব্যবহৃত ক্লাস।
সারাংশ
Bulma এর Card component খুবই শক্তিশালী এবং কাস্টমাইজযোগ্য, যা বিভিন্ন উপাদানকে সুন্দরভাবে উপস্থাপন করতে সাহায্য করে। আপনি card-image এর মাধ্যমে ছবি, card-content এর মাধ্যমে মূল কন্টেন্ট এবং card-footer এর মাধ্যমে ফুটার আইটেম যুক্ত করতে পারেন। এই উপাদানগুলির মাধ্যমে সহজেই ওয়েব পেজে আকর্ষণীয় এবং কার্যকরী ডিজাইন তৈরি করা সম্ভব। Bulma এর ফ্লেক্সবক্স এবং গ্রিড সিস্টেমের সাহায্যে কার্ডের কন্টেন্টের অ্যালাইনমেন্ট, সাইজ এবং স্টাইলিং সহজেই কাস্টমাইজ করা যায়।
