Back to BRIX

Tabs & Accordions

12 variations — underline tabs, pills, boxed, vertical, icon tabs, accordions, and more.

12 Elements
01

Classic — Underline Tabs

Product Overview

This is the overview panel content. It provides a general summary of the product, its purpose, and key benefits for users.

Key Features

Advanced analytics, real-time collaboration, custom workflows, and seamless integrations with your favorite tools.

Pricing Plans

Choose from Starter ($9/mo), Pro ($29/mo), or Enterprise (custom pricing) to match your team's needs.

Customer Reviews

Rated 4.8/5 by over 2,400 customers worldwide. See what people are saying about our platform.

02

Pills — Rounded Buttons

Showing all 23 items across all categories.

8 design projects — UI/UX, branding, illustrations, and motion design.

15 development tasks — frontend, backend, DevOps, and testing.

Marketing campaigns, content strategy, and social media planning.

Sales pipeline, lead generation, and customer outreach activities.

03

Boxed — Segmented Control

Daily view: Showing today's metrics — 1,234 visits, 89 conversions, $4,521 revenue.

Weekly view: 8,902 visits, 612 conversions, $31,204 revenue this week.

Monthly view: 38,421 visits, 2,847 conversions, $142,890 revenue this month.

Yearly view: 461,052 visits, 34,164 conversions, $1,714,680 total revenue.

04

Vertical — Side Navigation Tabs

General Settings

Manage your account details, display name, avatar, language preferences, and timezone settings.

Security Settings

Update your password, enable two-factor authentication, manage active sessions and connected devices.

Notification Preferences

Choose how and when you receive notifications — email, push, SMS, or in-app alerts.

Billing & Subscription

Manage your plan, update payment methods, download invoices, and view billing history.

Team Management

Invite team members, assign roles, manage permissions, and configure workspace settings.

05

Underline — Thick Border Style

Your latest posts and articles. Share thoughts, ideas, and updates with your audience.

Photos, videos, and media files you've uploaded to your profile.

Content you've liked and interacted with from other creators.

Bookmarked items you've saved for later reading.

06

Icon — Icon + Label Tabs

Welcome back! Here's an overview of your recent activity and notifications.

View and edit your profile information, bio, and social links.

You have 3 unread messages. Check your inbox for the latest conversations.

Customize your preferences, manage privacy settings, and configure integrations.

07

Card — Browser Tab Style

<div class="container">
  <h1>Hello World</h1>
</div>
.container {
  max-width: 1200px;
  margin: 0 auto;
}
document.querySelector('.container')
  .addEventListener('click', handler);
08

Full-Width — Equal Distribution

Detailed product description with materials, dimensions, care instructions, and usage guidelines.

Technical specifications: Weight 250g, Dimensions 15x10x3cm, Material: Premium Aluminum.

128 reviews with an average rating of 4.7/5 stars. Most praised: build quality and design.

Frequently asked questions about shipping, returns, warranty, and product compatibility.

09

Colored — Accent Background Tabs

12 new messages in your inbox. 3 flagged as important, 2 require immediate response.

Messages you've sent in the last 30 days. Total: 45 conversations.

5 draft messages saved. Last edited: 2 hours ago.

8 messages filtered as spam. Auto-deleted after 30 days.

10

Accordion — Classic FAQ Style

BRIX is a modular Bootstrap 5.3 component library with a copy-paste philosophy. Each component is self-contained — just copy the HTML block and paste it into your project. No build step, no dependencies beyond Bootstrap.

Yes! BRIX is licensed for both personal and commercial use. You can use it in client projects, SaaS products, templates, and internal tools without any additional licensing fees.

No JavaScript knowledge is required for most components. BRIX uses minimal vanilla JS for interactive elements like dropdowns and toggles, but the core components work with just HTML and CSS.

Simply change the accent class on your body tag (e.g., brix-blue, brix-red, brix-purple). For custom colors, edit the CSS variables in the themes/_themes.css file.

11

Accordion — Flush / Borderless

Download the BRIX package, include Bootstrap 5.3 and our CSS file, then copy any component HTML directly into your project. It's that simple!

Yes, we offer a free tier with access to basic components. Upgrade to Pro for the complete library and priority support.

BRIX supports all modern browsers — Chrome, Firefox, Safari, Edge, and Opera. IE11 is not supported.

12

Accordion — Separated Cards

Follow our quick start guide to set up BRIX in under 5 minutes. Include the CSS, copy a component, and you're ready to ship.

Customize colors, typography, spacing, and more using CSS custom properties. No Sass compilation needed — just override variables.

BRIX is lightweight and fast. Only include the components you need — no tree-shaking or bundling required.

Join our community of 5,000+ developers. Get help through Discord, GitHub discussions, or email support for Pro users.