BSB Component Library

Explore, test, and learn from our comprehensive collection of reusable components. Each component includes live examples, code snippets, and interactive demos.

Try Playground

Header Component

Responsive navigation header with mobile menu, theme switching, and accessibility features.

HTML 
<header class="bsb-header" data-bsb-component="header">
  <div class="container">
    <div class="bsb-header__content">
      <div class="bsb-header__brand">
        <a href="#" class="bsb-header__logo">
          <strong>Your Brand</strong>
        </a>
      </div>
      
      <nav class="bsb-header__nav">
        <ul class="bsb-header__menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Card Component

Flexible content container with multiple variants and consistent styling.

🎯

Default Card

A basic card with icon, title, and description text.

⭐

Feature Card

Enhanced card with feature styling and emphasis.

🔗

Clickable Card

Interactive card with hover effects and click handling.

HTML 
<div class="bsb-card" data-bsb-component="card">
  <div class="bsb-card__icon">🎯</div>
  <h3 class="bsb-card__title">Card Title</h3>
  <p class="bsb-card__text">Card description text.</p>
</div>

<!-- Variants -->
<div class="bsb-card bsb-card--feature">...</div>
<div class="bsb-card bsb-card--clickable">...</div>
<div class="bsb-card bsb-card--horizontal">...</div>

Hero Component

Attention-grabbing section for landing pages with multiple layout options.

Hero Title

Compelling description that captures attention and motivates action.

HTML 
<section class="bsb-hero bsb-hero--centered">
  <div class="container">
    <div class="bsb-hero__content">
      <h1 class="bsb-hero__title">Hero Title</h1>
      <p class="bsb-hero__description">
        Compelling description that motivates action.
      </p>
      <div class="bsb-hero__actions">
        <button class="btn btn--primary">Primary Action</button>
        <button class="btn btn--secondary">Secondary</button>
      </div>
    </div>
  </div>
</section>

Interactive Components

Components with JavaScript functionality and user interaction.

Theme Toggle

Three-state theme switcher: light, dark, auto

Language Toggle

Bilingual support with smooth transitions

Learning Toggle

Educational mode activator

Educational Components

Learning-focused components for interactive education.

Code Playground

Interactive Code Editor

Live coding environment

File Explorer

📁 src/
  📄 index.html
  📁 components/
  📁 styles/

Interactive project structure

SEO Analyzer

A
SEO Score

Real-time SEO analysis

Button Variants

Comprehensive button system with multiple styles and states.

HTML 
<!-- Primary Buttons -->
<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--outline">Outline</button>

<!-- Semantic Buttons -->
<button class="btn btn--success">Success</button>
<button class="btn btn--warning">Warning</button>
<button class="btn btn--error">Error</button>

<!-- Size Variants -->
<button class="btn btn--small">Small</button>
<button class="btn btn--large">Large</button>

Usage Guidelines

Best practices for implementing and customizing BSB components.

🎨 Customization

  • Modify CSS custom properties for theming
  • Use data attributes for component configuration
  • Follow BEM naming conventions
  • Maintain semantic HTML structure

♿ Accessibility

  • Include ARIA labels and roles
  • Ensure keyboard navigation works
  • Test with screen readers
  • Maintain color contrast ratios

⚡ Performance

  • Load JavaScript components conditionally
  • Use CSS-only features when possible
  • Optimize images and assets
  • Lazy load non-critical components

📱 Responsive Design

  • Test on multiple screen sizes
  • Use mobile-first approach
  • Ensure touch targets are 44px+
  • Consider device orientation