Heading Levels

Semantic headings from h1 to h6 with proportional typography

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

<%= bui_heading(level: :h1) { "Heading Level 1" } %>
<%= bui_heading(level: :h2) { "Heading Level 2" } %>
<%= bui_heading(level: :h3) { "Heading Level 3" } %>
<%= bui_heading(level: :h4) { "Heading Level 4" } %>
<%= bui_heading(level: :h5) { "Heading Level 5" } %>
<%= bui_heading(level: :h6) { "Heading Level 6" } %>

Heading with Subtitle

Pass subtitle as a parameter or use the subtitle slot for rich content

Subtitle as parameter:

Dashboard Overview

This subtitle is passed as a string parameter

Subtitle as slot (rich content):

User Profile

Welcome back! You have 3 new notifications since your last visit.

<%# Subtitle as parameter %>
<%= bui_heading(level: :h2, subtitle: "A brief description") { "Dashboard Overview" } %>

<%# Subtitle as slot (rich content) %>
<%= bui_heading(level: :h2) do |h| %>
  <% h.with_subtitle do %>
    <span>Welcome back! You have <strong>3 new notifications</strong>.</span>
  <% end %>
  User Profile
<% end %>

Heading with Actions

Use the actions slot to add buttons alongside the heading

Team Members

Project Settings

Manage your project settings and preferences

<%= bui_heading(level: :h2) do |h| %>
  <% h.with_actions do %>
    <%= bui_button(variant: :primary, size: :sm) { "Add New" } %>
  <% end %>
  Team Members
<% end %>

Heading Alignment

Left, center, and right text alignment

Left Aligned

Default left-aligned heading

Center Aligned

Center-aligned heading

Right Aligned

Right-aligned heading

<%= bui_heading(level: :h3, align: :left) { "Left Aligned" } %>
<%= bui_heading(level: :h3, align: :center) { "Center Aligned" } %>
<%= bui_heading(level: :h3, align: :right) { "Right Aligned" } %>

Heading with Divider

Add a bottom border to visually separate sections

Section with Divider

Content below the heading with a divider line separating it from the heading above.

Another Section

This section also has a subtitle

More content below another divided heading.

<%= bui_heading(level: :h2, divider: true) { "Section with Divider" } %>
<%= bui_heading(level: :h3, divider: true, subtitle: "With subtitle") { "Another Section" } %>

Heading Variants

Color variants for semantic meaning

Primary Heading

Secondary Heading

Accent Heading

Success Heading

Danger Heading

Warning Heading

Info Heading

Dark Heading

<%= bui_heading(level: :h3, variant: :primary) { "Primary Heading" } %>
<%= bui_heading(level: :h3, variant: :accent) { "Accent Heading" } %>
<%= bui_heading(level: :h3, variant: :success) { "Success Heading" } %>
<%= bui_heading(level: :h3, variant: :danger) { "Danger Heading" } %>

Dividers

Horizontal dividers with solid, dashed, and dotted styles

Solid (default):

Dashed:

Dotted:

<%= bui_divider(style: :solid) %>
<%= bui_divider(style: :dashed) %>
<%= bui_divider(style: :dotted) %>

Dividers with Labels

Labels can be positioned left, center, or right

Center label (default):

OR

Left label:

Section Start

Right label:

Continue

<%= bui_divider(label: "OR", label_position: :center) %>
<%= bui_divider(label: "Section Start", label_position: :left) %>
<%= bui_divider(label: "Continue", label_position: :right) %>

Divider Variants

Color variants for semantic dividers

Default (grayscale):

Primary:

Accent:

Success:

Danger:

Warning:

Info:

<%= bui_divider(variant: :primary, size: :sm) %>
<%= bui_divider(variant: :accent, size: :sm) %>
<%= bui_divider(variant: :success, size: :sm) %>
<%= bui_divider(variant: :danger, size: :sm) %>

Containers

Responsive width containers from sm to full

Small (max-w-screen-sm):

Container SM

Medium (max-w-screen-md):

Container MD

Large (max-w-screen-lg) - default:

Container LG

Extra Large (max-w-screen-xl):

Container XL

Full (max-w-full):

Container Full

<%= bui_container(size: :sm) do %>
  Content constrained to small width
<% end %>

<%= bui_container(size: :md) do %>
  Content constrained to medium width
<% end %>

<%= bui_container(size: :lg) do %>  <%# default %>
  Content constrained to large width
<% end %>

<%= bui_container(size: :xl) do %>
  Content constrained to extra large width
<% end %>

<%= bui_container(size: :full) do %>
  Full-width content
<% end %>

<%# Options: padding (true/false), centered (true/false) %>
<%= bui_container(size: :lg, padding: false, centered: false) do %>
  No padding, not centered
<% end %>

Typography & Layout