Fluxbit ViewComponents

Fluxbit::HeadingComponent or fx_heading

The Fluxbit::HeadingComponent is a customizable heading component that extends Fluxbit::Component. It provides a straightforward way to generate heading elements (<h1> through <h6>) with configurable sizes, letter spacing, and line heights. Additional HTML attributes can be passed to further control the component’s behavior and styling.

To start using the heading you can you the default way to call the component:

<%= render Fluxbit::HeadingComponent.new(size: 2, spacing: :wider, line_height: :relaxed) do %>
  My Heading
<% end %>

or you can use the alias (from the helpers):

<%= fx_heading(size: 2, spacing: :wider, line_height: :relaxed) do %>
  My Heading
<% end %>

The result is:

Options

Param Default Description
size 1 An integer from 1 to 6 that determines which heading level is rendered (<h1> through <h6>).
spacing :tight The letter spacing style for the heading. Must be one of the keys defined in styles[:spacings], such as :tighter, :tight, :normal, :wide, :wider, or :widest.
line_height :none The line height style for the heading. Must be one of the keys defined in styles[:line_heights], such as :none, :tight, :snug, :normal, :relaxed, or :loose.
props Additional HTML attributes to be applied to the heading element, such as class, id, data-*, etc. (e.g. props: { class: 'my-heading-class' }).

Slots

This component does not define any named slots. The text/content for the heading is provided through the default block:

<%= render Fluxbit::HeadingComponent.new(size: 3) do %>
  This is the heading content
<% end %>

Examples

Different heading sizes

Different letter spacing

Different line heights

Adding other HTML attributes

Customization

You can customize the appearance of this component by passing different parameters and by adding or overriding the default styles. For instance, you can create an initializer (e.g., config/initializers/change_heading_component_defaults.rb) to modify the default styles:

Fluxbit::Config::HeadingComponent.size = 1 # this is the default value
Fluxbit::Config::HeadingComponent.spacing = :tight # this is the default value
Fluxbit::Config::HeadingComponent.line_height = :none # this is the default value
Fluxbit::Config::HeadingComponent.styles[:line_heights] = [
  none: "leading-none",
  # ...
]

This allows you to centrally manage your default styles for headings throughout your application.

Dependencies

Styles

{
  "base": "mb-4 text-gray-900 dark:text-white",
  "sizes": {
    "h1": "text-5xl font-extrabold md:text-6xl lg:text-7xl",
    "h2": "text-4xl font-bold md:text-5xl lg:text-6xl",
    "h3": "text-3xl font-bold md:text-4xl lg:text-5xl",
    "h4": "text-2xl font-bold md:text-3xl lg:text-4xl",
    "h5": "text-xl font-bold md:text-2xl lg:text-3xl",
    "h6": "text-lg font-bold md:text-xl lg:text-2xl"
  },
  "spacings": {
    "tighter": "tracking-tighter",
    "tight": "tracking-tight",
    "normal": "tracking-normal",
    "wide": "tracking-wide",
    "wider": "tracking-wider",
    "widest": "tracking-widest"
  },
  "line_heights": {
    "none": "leading-none",
    "tight": "leading-tight",
    "snug": "leading-snug",
    "normal": "leading-normal",
    "relaxed": "leading-relaxed",
    "loose": "leading-loose"
  }
}

References