Materialize এর Cards এবং Panels

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

Cards কি?

Card হল একটি প্রি-স্টাইলড উপাদান যা তথ্যকে একটি নির্দিষ্ট কাঠামোতে প্রদর্শন করার জন্য ব্যবহৃত হয়। সাধারণত, এটি বিভিন্ন কনটেন্ট (যেমন ছবি, টেক্সট, বাটন ইত্যাদি) ধারণ করার জন্য ব্যবহৃত হয় এবং সেগুলোর মধ্যে ইন্টারঅ্যাকটিভিটি বা প্রতিক্রিয়া তৈরি করতে সাহায্য করে।

Materialize CSS এ card উপাদানটি অনেক ধরনের ভিন্ন ভিন্ন ব্যবহার এবং স্টাইলিংয়ের জন্য প্রস্তুত থাকে, যা খুব সহজেই ওয়েবসাইটে ব্যবহার করা যায়।

Basic Card Structure

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

এখানে:

• card-image: এখানে ছবির উপাদান থাকবে।
• card-title: কার্ডের শিরোনাম।
• card-content: এটি কার্ডের কনটেন্ট বা মূল অংশ।
• card-action: এখানে কোনো লিঙ্ক বা বাটন রাখা যাবে।

Card Variations

Materialize CSS তে কিছু ভিন্ন ভিন্ন কার্ডের ধরন রয়েছে, যেমন:

1. Card with Image: উপরে একটি ছবিসহ কার্ড।
2. Card with Actions: কার্ডের নিচে লিঙ্ক বা বাটন সহ।
3. Card with Hover Effect: যখন মাউস কার্ডের উপর থাকবে, তখন কিছু এনিমেশন দেখা যাবে।

<div class="card hoverable">
  <div class="card-image">
    <img src="image.jpg">
    <span class="card-title">Hoverable Card</span>
  </div>
  <div class="card-content">
    <p>This card has a hover effect.</p>
  </div>
</div>

Panels কি?

Panel সাধারণত একটি card-like উপাদান, যা তথ্য বা কনটেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। তবে, panel সাধারণত একটি নির্দিষ্ট এলাকা বা কনটেন্ট বিভাগকে চিহ্নিত করে এবং এর মধ্যে সাধারণত header, content, এবং footer থাকে। Materialize CSS তে panel গুলি সাধারণত বেশি ব্যবহারিক এবং কমপ্যাক্ট হয়ে থাকে।

Panel Structure

Materialize CSS তে panel তৈরি করার জন্য একটি সাধারণ স্টাইলিং অ্যাপ্লিকেশন রয়েছে, যা খুব সহজেই উপাদান যোগ এবং কনটেন্ট প্রদর্শন করতে সহায়ক।

<div class="card-panel teal">
  <span class="white-text">This is a panel with some content inside it.</span>
</div>

এখানে:

• card-panel: এটি প্যানেল তৈরি করতে ব্যবহৃত ক্লাস।
• teal: এই প্যানেলের রঙ, আপনি এখানে যে কোন রঙ ব্যবহার করতে পারেন (যেমন: red, blue, green ইত্যাদি)।
• white-text: টেক্সটের রঙ সাদা করতে ব্যবহৃত ক্লাস।

Panel with Header and Footer

আপনি panel এর মধ্যে একটি header এবং footer যোগ করতে পারেন, যেমন:

<div class="card-panel teal">
  <h5 class="white-text">Panel Title</h5>
  <p class="white-text">This is a simple panel with header and footer.</p>
  <footer class="white-text">
    <p>Footer Content</p>
  </footer>
</div>

এখানে:

• h5: প্যানেলের শিরোনাম হিসেবে ব্যবহৃত হয়।
• footer: প্যানেলের নিচের অংশে তথ্য বা অন্যান্য উপাদান থাকতে পারে।

Cards এবং Panels এর মধ্যে পার্থক্য

উপসংহার

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

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 ক্লাসগুলি কাস্টমাইজ এবং স্টাইল করা খুবই সহজ, যা আপনার ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ফাংশনাল করে তোলে।

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 এনিমেশন ব্যবহার করে আপনি সহজেই আপনার ওয়েবসাইটে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ কার্ড তৈরি করতে পারেন।

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 ব্যবহার করে আপনি যেকোনো ডিভাইসে এই কার্ডগুলির উপস্থাপনা নিশ্চিত করতে পারবেন।

Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Card এবং Panel এর মতো জনপ্রিয় উপাদানগুলির সাথে ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। এখানে আমরা Card এবং Card Reveal তৈরি করার প্রক্রিয়া এবং তাদের কাস্টমাইজেশন সম্পর্কে আলোচনা করব।

Materialize Card

Materialize Card একটি বক্স স্টাইলের উপাদান, যা সাধারণত তথ্য বা কনটেন্ট দেখানোর জন্য ব্যবহৃত হয়। আপনি এর মধ্যে ছবি, টেক্সট, বাটন এবং অন্যান্য উপাদান ব্যবহার করতে পারেন। Card একটি অত্যন্ত জনপ্রিয় উপাদান, যা সুশৃঙ্খলভাবে কন্টেন্ট উপস্থাপন করতে সহায়ক।

Basic Card Example

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

এখানে:

• card-image: এটি কার্ডের ছবিটি প্রদর্শন করবে।
• card-title: ছবির ওপর কার্ডের শিরোনাম।
• card-content: এই অংশে টেক্সট বা কনটেন্ট থাকে।
• card-action: এখানে লিঙ্ক বা বাটন থাকে।

Card with Button

<div class="card">
  <div class="card-image">
    <img src="https://via.placeholder.com/150">
    <span class="card-title">Card Title</span>
  </div>
  <div class="card-content">
    <p>This is a simple card with a button.</p>
  </div>
  <div class="card-action">
    <a href="#">Read More</a>
    <a href="#" class="btn">Click Me</a>
  </div>
</div>

এখানে, আপনি card-action এর মধ্যে একটি button যুক্ত করতে পারেন।

Materialize Card Reveal

Card Reveal হল একটি অত্যন্ত ইন্টারঅ্যাকটিভ ফিচার, যেখানে কার্ডের পিছনে অতিরিক্ত কনটেন্ট লুকানো থাকে এবং যখন ইউজার কার্ডের ওপর ক্লিক করে বা হোভার করে, তখন তা প্রদর্শিত হয়। এটি ব্যবহারকারীর জন্য আরও আকর্ষণীয় অভিজ্ঞতা তৈরি করে।

Card Reveal Example

<div class="card">
  <div class="card-image">
    <img src="https://via.placeholder.com/150">
    <span class="card-title">Card Title</span>
  </div>
  <div class="card-reveal">
    <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
    <p>This is revealed content.</p>
  </div>
  <div class="card-content">
    <p>Click to reveal the card content.</p>
  </div>
</div>

এখানে:

• card-reveal: এটি লুকানো কনটেন্ট ধারণ করে যা ইউজার ক্লিক করলে বা হোভার করলে প্রদর্শিত হবে।
• close আইকন: এটি কার্ডের রিভিল অংশ বন্ধ করার জন্য ব্যবহৃত হয়।

Card Reveal Using JavaScript

Materialize CSS এর card-reveal সেকশন কার্যকরী করতে JavaScript ব্যবহার করতে হয়। নিচে একটি উদাহরণ দেওয়া হলো:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.card');
    var instances = M.Card.init(elems);
  });
</script>

এখানে M.Card.init(elems) ব্যবহার করে আপনি সকল card-reveal কার্ডগুলো কার্যকরী করতে পারবেন।

Panel Example in Materialize

Materialize CSS এ panel সাধারণত বক্সের মতো উপাদান, যেখানে আপনার কনটেন্ট যেমন টেক্সট, বাটন, বা চিত্র প্রদর্শিত হয়। এটি মূলত card এর একটি সহজ এবং সিম্পল ভার্সন হিসেবে কাজ করে।

Simple Panel Example

<div class="card-panel teal">
  <span class="white-text">This is a simple panel.</span>
</div>

এখানে:

• card-panel: এটি একটি সিম্পল প্যানেল উপাদান।
• teal: এই ক্লাসটি প্যানেলের পটভূমির রঙ পরিবর্তন করবে।
• white-text: এখানে টেক্সটের রঙ সাদা করা হয়েছে।

Panel with Icon and Button

<div class="card-panel orange lighten-1">
  <i class="material-icons left">access_alarm</i>
  <span class="white-text">Panel with Icon</span>
  <a href="#" class="btn-flat white-text">Click Here</a>
</div>

এখানে:

• material-icons: এটি আইকন প্রদর্শন করবে।
• btn-flat: এটি একটি ফ্ল্যাট বাটন তৈরি করবে।

উপসংহার

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