Simple এবং Complex Cards তৈরি করা

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা Material Design এর নীতির উপর ভিত্তি করে তৈরি। Materialize এর একটি শক্তিশালী বৈশিষ্ট্য হলো এর cards কম্পোনেন্ট, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের জন্য সুন্দর এবং ফাংশনাল কনটেন্ট ব্লক তৈরি করতে ব্যবহৃত হয়। আপনি সহজেই simple এবং complex cards তৈরি করতে পারেন যা আপনার ডিজাইনে আধুনিকতা এবং ইন্টারঅ্যাকটিভিটি যোগ করবে।

Simple Cards

Simple Cards হলো সহজ, সোজাসাপ্টা এবং ফাংশনাল ডিজাইন যা সাধারণত তথ্য বা কনটেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। Materialize CSS এ card কম্পোনেন্টটি খুব সহজে তৈরি করা যায় এবং এতে কিছু বেসিক স্টাইল দেওয়া থাকে।

Simple Card তৈরি করা

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

এখানে:

• card: এটি মূল কার্ডের জন্য ব্যবহৃত ক্লাস।
• card-image: কার্ডের ছবিটি প্রদর্শন করার জন্য ব্যবহৃত ক্লাস।
• card-content: কার্ডের মূল কনটেন্ট বা টেক্সট প্রদর্শন করতে ব্যবহৃত ক্লাস।
• card-action: এটি সাধারণত লিঙ্ক বা অ্যাকশন বাটন প্রদর্শন করতে ব্যবহৃত হয়।

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

• সোজাসাপ্টা ডিজাইন: Simple Card সাধারণত ছোট এবং পরিষ্কার থাকে, যা একটি নির্দিষ্ট টপিক বা বিষয়কে সহজভাবে উপস্থাপন করে।
• ইন্টারঅ্যাকটিভ লিঙ্ক: আপনি card-action অংশে লিঙ্ক বা বাটন যুক্ত করতে পারেন।
• Responsive Design: Materialize CSS এর কার্ডগুলো responsive, অর্থাৎ বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।

Complex Cards

Complex Cards বেশি ইনফরমেশন বা কনটেন্ট ধারণ করার জন্য ব্যবহৃত হয় এবং এতে একাধিক সেকশন থাকতে পারে যেমন header, footer, media, lists ইত্যাদি। এই ধরনের কার্ডগুলো সাধারণত বড় পরিসরের ওয়েবসাইট বা অ্যাপ্লিকেশন ডিজাইনে ব্যবহৃত হয় যেখানে অনেক ধরণের ইনফরমেশন বা অ্যাকশন প্রদর্শন করা হয়।

Complex Card তৈরি করা

<div class="card large">
  <div class="card-image">
    <img src="https://via.placeholder.com/500x250" alt="Complex Card Image">
    <span class="card-title">Complex Card Title</span>
  </div>
  <div class="card-content">
    <p>This is a complex card with more content and a variety of actions.</p>
  </div>
  <div class="card-action">
    <a href="#">This is a link</a>
    <a href="#">Another link</a>
  </div>
  <div class="card-reveal">
    <span class="card-title">Card Reveal Title<i class="material-icons right">close</i></span>
    <p>This is some more information about the card.</p>
  </div>
</div>

এখানে:

• large: এটি কার্ডের আকার বড় করার জন্য ব্যবহার করা হয়েছে। এটি কার্ডের ভিতরে আরো তথ্য এবং বিভিন্ন ফিচার সমর্থন করে।
• card-reveal: এটি একটি এনিমেশন এফেক্টের মাধ্যমে কার্ডের আরও বিস্তারিত তথ্য বা কনটেন্ট দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত এক্সপ্যান্ডেবল বা হিডেন কনটেন্ট প্রদর্শন করতে ব্যবহৃত হয়।
• card-title: কার্ডের শিরোনাম বা টাইটেল প্রদর্শন করতে ব্যবহৃত ক্লাস।
• material-icons: এটি একটি আইকন প্রদর্শন করতে ব্যবহৃত হয়, যেমন এখানে "close" আইকন দিয়ে কার্ড রিভিল বন্ধ করা হচ্ছে।

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

• বিভিন্ন সেকশন: Complex Card এ বিভিন্ন সেকশন থাকতে পারে যেমন টাইটেল, কনটেন্ট, লিঙ্ক, এবং card-reveal যেখানে অতিরিক্ত তথ্য দেখা যাবে।
• ইন্টারঅ্যাকটিভ এনিমেশন: Materialize CSS এর card-reveal এফেক্ট ব্যবহার করে আপনি এনিমেশন এবং ইন্টারঅ্যাকশন যোগ করতে পারেন, যা ইউজারদের আরও আকর্ষণীয় অভিজ্ঞতা প্রদান করে।
• Responsive: Complex Card গুলোও responsive, তাই এটি ছোট স্ক্রীন থেকে বড় স্ক্রীনে সুন্দরভাবে কাজ করবে।

Card Images with Overlay

Card images with overlay ব্যবহৃত হয় যেখানে একটি ছবির উপরে টেক্সট বা অন্যান্য কনটেন্ট ওপেন করা হয়। এটি Materialize CSS এর একটি জনপ্রিয় বৈশিষ্ট্য।

Card with Image Overlay

<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 a card with an image and overlay text.</p>
  </div>
</div>

এখানে:

• card-title: এটি card-image এর উপর একটি টেক্সট (overlay) দেখাবে।

Card with Action Buttons

কার্ডে action buttons ব্যবহার করা যেতে পারে, যা ইউজারের জন্য সহজে অ্যাকশন করতে সহায়ক। এই বাটনগুলো সাধারণত card-action সেকশনে থাকে।

Card with Action Buttons

<div class="card">
  <div class="card-content">
    <p>Click the button below for more actions</p>
  </div>
  <div class="card-action">
    <a href="#">Action 1</a>
    <a href="#">Action 2</a>
  </div>
</div>

এখানে:

• card-action: এটি সাধারণত একাধিক অ্যাকশন লিঙ্ক বা বাটন প্রদর্শন করতে ব্যবহৃত হয়।

উপসংহার

Materialize CSS এর cards কম্পোনেন্ট ওয়েব ডিজাইনকে সুন্দর এবং ফাংশনাল করে তোলে। Simple cards সাধারণভাবে সোজাসাপ্টা এবং দ্রুত তথ্য প্রদর্শন করতে ব্যবহৃত হয়, যখন complex cards বড় পরিসরের কনটেন্ট এবং অতিরিক্ত ফিচার সমর্থন করে। Materialize CSS এর শক্তিশালী স্টাইলিং এবং card-reveal এনিমেশন ব্যবহার করে আপনি সহজেই আপনার ওয়েবসাইটে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ কার্ড তৈরি করতে পারেন।