Components

Examples for the supported Bulma component wrappers

Ralma components follow Bulma's markup structure while letting you write named tags in Ractive templates.

<modal active>
  <modal-background></modal-background>
  <modal-card>
    <modal-card-head>
      <modal-card-title>Delete item?</modal-card-title>
      <modal-close ariaLabel="close"></modal-close>
    </modal-card-head>
    <modal-card-foot>
      <button danger>Delete</button>
      <button>Cancel</button>
    </modal-card-foot>
  </modal-card>
</modal>

Examples

Open a component family for supported tags, common modifiers, and sample markup.

Columns

Columns→

Responsive column layout wrappers for flexible two-column and multi-column screens.

Elements

Button→

Bulma button wrapper with style modifiers and safe href fallback behavior.

Elements

Content→

Semantic rich-text wrapper using Bulma content typography classes.

Components

Breadcrumb→

Navigation trail helpers for breadcrumb wrappers and items.

Components

Card→

Card container plus all card sub-components for structured content blocks.

Components

Dropdown→

Dropdown primitives covering trigger, menu, content, and dropdown items.

Components

Menu→

Sidebar menu wrappers for labels and grouped menu lists.

Components

Message→

Contextual message blocks with independent header and body tags.

Components

Modal→

Modal shell and modal-card helpers for dialog and confirmation flows.

Components

Navbar→

Navbar wrappers for brand area, menus, dropdowns, and link entries.

Components

Pagination→

Pagination wrappers for previous/next links, list items, and ellipsis.

Components

Panel→

Panel wrappers for heading, tabs, items, and icon slots.

Components

Tabs→

Tabs wrappers for tab list, tab item, and tab link controls.

Elements

Common single-element helpers from Bulma.

<button><content>

Columns

Responsive layout helpers based on Bulma columns.

<columns><column>

Breadcrumb

Navigation trail and breadcrumb items.

<breadcrumb><breadcrumb-item>

Card

Card container and card sub-parts.

<card><card-header><card-header-title><card-header-icon><card-image><card-content><card-footer><card-footer-item>

Dropdown

Dropdown wrapper, trigger, menu, and content helpers.

<dropdown><dropdown-trigger><dropdown-button><dropdown-item><dropdown-menu><dropdown-content><dropdown-divider>

Menu

Side menu labels and item lists.

<menu><menu-label><menu-list>

Message

Message wrapper with header and body.

<message><message-header><message-body>

Modal

Modal shell, close, and modal-card helpers.

<modal><modal-background><modal-content><modal-close><modal-card><modal-card-head><modal-card-title><modal-card-body><modal-card-foot>

Navbar

Navbar structure and dropdown parts.

<navbar><navbar-brand><navbar-burger><navbar-menu><navbar-start><navbar-end><navbar-item><navbar-item-dropdown><navbar-link><navbar-dropdown><navbar-divider>

Pagination

Pagination wrappers and links.

<pagination><pagination-previous><pagination-next><pagination-list><pagination-link><pagination-ellipsis>

Panel

Panel shell, tabs, blocks, and icon helper.

<panel><panel-heading><panel-tabs><panel-block><panel-icon>

Tabs

Tabs container and tab links.

<tabs><tab><tab-link>

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.