Foundation ফ্রেমওয়ার্কে Callouts, Labels, এবং Badges হলো গুরুত্বপূর্ণ UI উপাদান যা ওয়েব পেজে বিভিন্ন তথ্য বা সতর্কতা প্রদর্শন করতে সহায়তা করে। এই উপাদানগুলো ব্যবহার করে ওয়েবসাইটে তথ্য বা স্ট্যাটাসকে আরও কার্যকরভাবে প্রদর্শন করা যায়।
১. Callouts (কলআউটস)
Callouts হলো হাইলাইট করা এলিমেন্ট যা সাধারণত ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ তথ্য বা সতর্কতা দেখাতে ব্যবহৃত হয়। এগুলো সাধারণত কিছু বিশেষ ধরনের বার্তা, যেমন: সতর্কতা, টিপস, অথবা গুরুত্বপূর্ণ বিজ্ঞপ্তি প্রদর্শন করতে ব্যবহার করা হয়।
Callouts এর ব্যবহারের উদাহরণ:
<div class="callout">
<h5>Important Notice</h5>
<p>Make sure to back up your data before proceeding with the update.</p>
</div>
এখানে:
- class="callout": এটি একটি সাধারণ কলআউট স্টাইল অ্যাপ্লাই করবে, যেটি সাধারণত একটা বর্ডার, ব্যাকগ্রাউন্ড কালার এবং প্যাডিংসহ প্রদর্শিত হয়।
Callout এর স্টাইল কাস্টমাইজেশন
Foundation এ কলআউট বিভিন্ন ধরনের হতে পারে, যেমন:
- primary
- secondary
- warning
- success
- alert
<div class="callout primary">
<p>This is a primary callout.</p>
</div>
<div class="callout warning">
<p>This is a warning callout.</p>
</div>
২. Labels (লেবেলস)
Labels হলো ছোট টেক্সট বা স্নিপেট যেগুলি সাধারণত কোন কন্টেন্ট বা উপাদানকে শ্রেণীভুক্ত করতে বা ট্যাগ করতে ব্যবহৃত হয়। এগুলো সাধারণত স্ট্যাটাস বা ক্যাটেগরি দেখানোর জন্য ব্যবহার করা হয়, যেমন: "নতুন", "বয়স ১৮+", "প্রমো", ইত্যাদি।
Labels এর ব্যবহারের উদাহরণ:
<span class="label">New</span>
<span class="label success">Completed</span>
<span class="label alert">Urgent</span>
এখানে:
- class="label": এটি একটি সাধারণ লেবেল স্টাইল প্রদান করবে।
- success, alert: এগুলো লেবেলের স্টাইল কাস্টমাইজ করার জন্য ব্যবহৃত ক্লাস, যেমন: গ্রিন (completed) বা রেড (urgent)।
Label এর স্টাইল কাস্টমাইজেশন
Foundation এ Labels এর বিভিন্ন ভ্যারিয়েন্ট পাওয়া যায়:
- success: সফলতা বা পূর্ণতা সূচক।
- alert: সতর্কতা সূচক।
- secondary: সেকেন্ডারি বা সাধারণ ট্যাগ।
- primary: প্রাথমিক ট্যাগ।
<span class="label success">Active</span>
<span class="label alert">Critical</span>
৩. Badges (ব্যাজেস)
Badges ছোট, রাউন্ডেড এবং আকর্ষণীয় টেক্সট এলিমেন্ট যা সাধারণত কিছু পরিমাণ সংখ্যা বা স্ট্যাটাস দেখানোর জন্য ব্যবহৃত হয়। এগুলো সাধারণত নোটিফিকেশন, সংখ্যা অথবা একটি স্ট্যাটাস নির্দেশ করার জন্য ব্যবহৃত হয়। যেমন: "নতুন বার্তা", "অ্যাকটিভ", "নির্ধারিত সময়", ইত্যাদি।
Badges এর ব্যবহারের উদাহরণ:
<a href="#" class="button">Messages <span class="badge">5</span></a>
<a href="#" class="button success">Orders <span class="badge">12</span></a>
এখানে:
- class="badge": এটি ব্যাজের স্টাইল প্রয়োগ করবে।
- button success: এটি একটি ব্যাজের সাথে একটি বাটন যুক্ত করবে, যা রেটিং বা কন্টেন্টের সংখ্যা দেখাবে।
Badge এর স্টাইল কাস্টমাইজেশন
Foundation এ Badges বিভিন্ন ধরনের হতে পারে:
- primary
- secondary
- success
- alert
<span class="badge success">5</span>
<span class="badge alert">3</span>
Callouts, Labels, এবং Badges এর সুবিধা
- Callouts:
- গুরুত্বপূর্ণ তথ্য বা সতর্কতা প্রদর্শন করতে ব্যবহৃত হয়।
- সহজেই ব্যবহারকারীদের দৃষ্টি আকর্ষণ করতে সহায়ক।
- রেসপনসিভ এবং কাস্টমাইজযোগ্য।
- Labels:
- স্ট্যাটাস বা ক্যাটেগরি বা শ্রেণীবদ্ধ তথ্য প্রদর্শন করতে ব্যবহৃত হয়।
- কমপ্যাক্ট এবং সহজে ভিজ্যুয়াল হাইলাইট করতে সহায়ক।
- Badges:
- সংখ্যা বা পরিমাণ প্রদর্শন করতে ব্যবহৃত হয় (যেমন: নতুন নোটিফিকেশন সংখ্যা)।
- ব্যবহারে সহজ এবং দ্রুত নজরে আসে।
Foundation ফ্রেমওয়ার্কে Callouts, Labels, এবং Badges ব্যবহার করার মাধ্যমে আপনি আপনার ওয়েবসাইটে প্রয়োজনীয় তথ্য এবং স্ট্যাটাস সহজে এবং আকর্ষণীয়ভাবে প্রদর্শন করতে পারবেন। এগুলোর ব্যবহার আপনার ওয়েব ডিজাইনকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।
