or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

base.mdcomponents.mdcustomization.mdelements.mdform.mdgrid.mdhelpers.mdindex.mdlayout.md
tile.json

components.mddocs/

Complex Components

Multi-element components like navigation bars, modals, cards, and dropdowns that combine multiple parts into cohesive interface patterns.

Capabilities

Navigation Bar

Responsive horizontal navigation with brand, menu items, and dropdown support.

/**
 * Import navbar styles
 */
@use 'bulma/sass/components/navbar';
<!-- Basic navbar -->
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="logo.png" alt="Brand" width="112" height="28">
    </a>
    
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">About</a>
      
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">Sub Item 1</a>
          <a class="navbar-item">Sub Item 2</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Report Issue</a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">Log in</a>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- Navbar colors -->
<nav class="navbar is-primary"><!-- Primary color --></nav>
<nav class="navbar is-dark"><!-- Dark theme --></nav>
<nav class="navbar is-light"><!-- Light theme --></nav>

Modal

Overlay dialogs for focused content display with backdrop and close functionality.

/**
 * Import modal styles
 */
@use 'bulma/sass/components/modal';
<!-- Basic modal -->
<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Your content here -->
    <div class="box">
      <p>Modal content goes here.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<!-- Modal card -->
<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal Title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <p>Modal content and body text.</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

<!-- Active modal -->
<div class="modal is-active">
  <!-- Modal content -->
</div>

Card

Flexible content container with header, body, and footer sections.

/**
 * Import card styles
 */
@use 'bulma/sass/components/card';
<!-- Basic card -->
<div class="card">
  <div class="card-content">
    <div class="content">
      Basic card with content.
    </div>
  </div>
</div>

<!-- Card with header and footer -->
<div class="card">
  <header class="card-header">
    <p class="card-header-title">Card Header</p>
    <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </header>
  <div class="card-content">
    <div class="content">
      Card content goes here.
    </div>
  </div>
  <footer class="card-footer">
    <a class="card-footer-item">Save</a>
    <a class="card-footer-item">Edit</a>
    <a class="card-footer-item">Delete</a>
  </footer>
</div>

<!-- Card with image -->
<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="image.jpg" alt="Card image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="avatar.jpg" alt="Avatar">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>
    <div class="content">
      Card content with media and image.
    </div>
  </div>
</div>

Dropdown

Toggleable contextual menu for displaying lists of links and actions.

/**
 * Import dropdown styles
 */
@use 'bulma/sass/components/dropdown';
<!-- Basic dropdown -->
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a class="dropdown-item">Dropdown item</a>
      <a class="dropdown-item">Other dropdown item</a>
      <a class="dropdown-item is-active">Active dropdown item</a>
      <hr class="dropdown-divider">
      <a class="dropdown-item">With a divider</a>
    </div>
  </div>
</div>

<!-- Active dropdown -->
<div class="dropdown is-active">
  <!-- Dropdown content -->
</div>

<!-- Dropdown positions -->
<div class="dropdown is-right"><!-- Right aligned --></div>
<div class="dropdown is-up"><!-- Dropup --></div>

<!-- Hoverable dropdown -->
<div class="dropdown is-hoverable">
  <!-- Opens on hover -->
</div>

Menu

Vertical navigation menu for sidebars and navigation panels.

/**
 * Import menu styles
 */
@use 'bulma/sass/components/menu';
<!-- Basic menu -->
<aside class="menu">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a>Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
  
  <p class="menu-label">Administration</p>
  <ul class="menu-list">
    <li><a>Team Settings</a></li>
    <li>
      <a class="is-active">Manage Your Team</a>
      <ul>
        <li><a>Members</a></li>
        <li><a>Plugins</a></li>
        <li><a>Add a member</a></li>
      </ul>
    </li>
    <li><a>Invitations</a></li>
    <li><a>Cloud Storage Environment Settings</a></li>
    <li><a>Authentication</a></li>
  </ul>
  
  <p class="menu-label">Transactions</p>
  <ul class="menu-list">
    <li><a>Payments</a></li>
    <li><a>Transfers</a></li>
    <li><a>Balance</a></li>
  </ul>
</aside>

Message

Colored message blocks for alerts, notifications, and informational content.

/**
 * Import message styles
 */
@use 'bulma/sass/components/message';
<!-- Basic messages -->
<article class="message">
  <div class="message-body">
    Default message body.
  </div>
</article>

<article class="message is-primary">
  <div class="message-body">
    Primary message.
  </div>
</article>

<!-- Message with header -->
<article class="message is-info">
  <div class="message-header">
    <p>Info Message</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Message with header and delete button.
  </div>
</article>

<!-- Message colors -->
<article class="message is-success"><!-- Success message --></article>
<article class="message is-warning"><!-- Warning message --></article>
<article class="message is-danger"><!-- Danger message --></article>

<!-- Message sizes -->
<article class="message is-small"><!-- Small message --></article>
<article class="message is-medium"><!-- Medium message --></article>
<article class="message is-large"><!-- Large message --></article>

Pagination

Page navigation controls for multi-page content.

/**
 * Import pagination styles
 */
@use 'bulma/sass/components/pagination';
<!-- Basic pagination -->
<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

<!-- Pagination alignment -->
<nav class="pagination is-centered"><!-- Centered --></nav>
<nav class="pagination is-right"><!-- Right aligned --></nav>

<!-- Pagination sizes -->
<nav class="pagination is-small"><!-- Small pagination --></nav>
<nav class="pagination is-medium"><!-- Medium pagination --></nav>
<nav class="pagination is-large"><!-- Large pagination --></nav>

<!-- Rounded pagination -->
<nav class="pagination is-rounded">
  <!-- Rounded pagination links -->
</nav>

Panel

Collapsible container for grouping related content with tabs and blocks.

/**
 * Import panel styles
 */
@use 'bulma/sass/components/panel';
<!-- Basic panel -->
<article class="panel">
  <p class="panel-heading">Panel Heading</p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" placeholder="Search">
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    Panel item 1
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    Panel item 2
  </a>
  <div class="panel-block">
    <button class="button is-link is-outlined is-fullwidth">
      Reset all filters
    </button>
  </div>
</article>

<!-- Panel colors -->
<article class="panel is-primary"><!-- Primary panel --></article>
<article class="panel is-info"><!-- Info panel --></article>

Tabs

Horizontal navigation tabs for switching between content sections.

/**
 * Import tabs styles
 */
@use 'bulma/sass/components/tabs';
<!-- Basic tabs -->
<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

<!-- Tab alignments -->
<div class="tabs is-centered"><!-- Centered tabs --></div>
<div class="tabs is-right"><!-- Right aligned tabs --></div>

<!-- Tab sizes -->
<div class="tabs is-small"><!-- Small tabs --></div>
<div class="tabs is-medium"><!-- Medium tabs --></div>
<div class="tabs is-large"><!-- Large tabs --></div>

<!-- Tab styles -->
<div class="tabs is-boxed"><!-- Boxed tabs --></div>
<div class="tabs is-toggle"><!-- Toggle tabs --></div>
<div class="tabs is-toggle is-toggle-rounded"><!-- Rounded toggle tabs --></div>
<div class="tabs is-fullwidth"><!-- Full width tabs --></div>

<!-- Tabs with icons -->
<div class="tabs">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>Music</span>
      </a>
    </li>
  </ul>
</div>

Breadcrumb

Navigation trail showing the user's location within a site hierarchy.

/**
 * Import breadcrumb styles
 */
@use 'bulma/sass/components/breadcrumb';
<!-- Basic breadcrumb -->
<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/clothing">Clothing</a></li>
    <li class="is-active"><a href="#" aria-current="page">Shirts</a></li>
  </ul>
</nav>

<!-- Breadcrumb alignments -->
<nav class="breadcrumb is-centered"><!-- Centered --></nav>
<nav class="breadcrumb is-right"><!-- Right aligned --></nav>

<!-- Breadcrumb sizes -->
<nav class="breadcrumb is-small"><!-- Small breadcrumb --></nav>
<nav class="breadcrumb is-medium"><!-- Medium breadcrumb --></nav>
<nav class="breadcrumb is-large"><!-- Large breadcrumb --></nav>

<!-- Breadcrumb separators -->
<nav class="breadcrumb has-arrow-separator"><!-- Arrow separator --></nav>
<nav class="breadcrumb has-bullet-separator"><!-- Bullet separator --></nav>
<nav class="breadcrumb has-dot-separator"><!-- Dot separator --></nav>
<nav class="breadcrumb has-succeeds-separator"><!-- Succeeds separator --></nav>