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

elements.mddocs/

UI Elements

Individual interface components including buttons, forms, tables, and other standalone elements with consistent styling and multiple variants.

Capabilities

Button

Versatile button component with multiple styles, sizes, states, and grouping options.

/**
 * Import button styles
 */
@use 'bulma/sass/elements/button';
<!-- Basic buttons -->
<button class="button">Default Button</button>
<button class="button is-primary">Primary Button</button>
<button class="button is-link">Link Button</button>
<button class="button is-info">Info Button</button>
<button class="button is-success">Success Button</button>
<button class="button is-warning">Warning Button</button>
<button class="button is-danger">Danger Button</button>

<!-- Button sizes -->
<button class="button is-small">Small</button>
<button class="button">Normal</button> 
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>

<!-- Button states -->
<button class="button is-loading">Loading</button>
<button class="button" disabled>Disabled</button>
<button class="button is-static">Static</button>

<!-- Button styles -->
<button class="button is-outlined">Outlined</button>
<button class="button is-inverted">Inverted</button>
<button class="button is-rounded">Rounded</button>
<button class="button is-fullwidth">Full Width</button>

<!-- Button groups -->
<div class="buttons">
  <button class="button">Left</button>
  <button class="button">Center</button>
  <button class="button">Right</button>
</div>

<!-- Button addons -->
<div class="field has-addons">
  <div class="control">
    <button class="button">Button</button>
  </div>
  <div class="control">
    <button class="button">Button</button>
  </div>
</div>

Block

Consistent spacing utility for creating block-level spacing between elements.

/**
 * Import block utility
 */
@use 'bulma/sass/elements/block';
<!-- Block spacing -->
<div class="block">
  <p>This paragraph has consistent bottom margin.</p>
</div>
<div class="block">
  <p>This paragraph also has consistent bottom margin.</p>
</div>
<div class="block">
  <p>All blocks maintain uniform spacing.</p>
</div>

<!-- Block in components -->
<div class="notification is-info block">
  <p>Notification with block spacing</p>
</div>
<div class="box block">
  <p>Box with block spacing</p>
</div>

Content

Styled container for rich text content with consistent typography for HTML elements.

/**
 * Import content styles
 */
@use 'bulma/sass/elements/content';
<!-- Basic content container -->
<div class="content">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
  
  <ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
  </ul>
  
  <ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
  </ol>
  
  <blockquote>
    This is a blockquote with styled borders and background.
  </blockquote>
  
  <pre><code>Code block with monospace font</code></pre>
  
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Content sizes -->
<div class="content is-small">Small content text</div>
<div class="content is-medium">Medium content text</div>
<div class="content is-large">Large content text</div>

<!-- List types -->
<div class="content">
  <ol class="is-lower-alpha">
    <li>Lower alpha list</li>
    <li>Second item</li>
  </ol>
  
  <ol class="is-lower-roman">
    <li>Lower roman list</li>
    <li>Second item</li>
  </ol>
  
  <ol class="is-upper-alpha">
    <li>Upper alpha list</li>
    <li>Second item</li>
  </ol>
  
  <ol class="is-upper-roman">
    <li>Upper roman list</li>
    <li>Second item</li>
  </ol>
</div>

Icon

Icon containers with consistent sizing and text integration support.

/**
 * Import icon styles
 */
@use 'bulma/sass/elements/icon';
<!-- Basic icons -->
<span class="icon">
  <i class="fas fa-home"></i>
</span>

<span class="icon has-text-info">
  <i class="fas fa-info-circle"></i>
</span>

<span class="icon has-text-success">
  <i class="fas fa-check-circle"></i>
</span>

<!-- Icon sizes -->
<span class="icon is-small">
  <i class="fas fa-home"></i>
</span>

<span class="icon">
  <i class="fas fa-home"></i>
</span>

<span class="icon is-medium">
  <i class="fas fa-home"></i>
</span>

<span class="icon is-large">
  <i class="fas fa-home"></i>
</span>

<!-- Icon with text -->
<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</span>

<span class="icon-text">
  <span>Download</span>
  <span class="icon">
    <i class="fas fa-download"></i>
  </span>
</span>

<!-- Icon text as div -->
<div class="icon-text">
  <span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Information message with icon</span>
</div>

Loader

Animated loading spinner for indicating loading states.

/**
 * Import loader styles
 */
@use 'bulma/sass/elements/loader';
<!-- Basic loader -->
<div class="loader"></div>

<!-- Loader in buttons -->
<button class="button is-loading is-primary">Loading</button>

<!-- Loader in custom containers -->
<div style="position: relative; height: 200px; width: 200px;">
  <div class="loader" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</div>

The loader class creates a spinning circular animation using CSS borders and is typically used with the is-loading modifier on buttons or as a standalone loading indicator.

Box

Simple container with padding, border, and shadow for grouping content.

/**
 * Import box styles
 */
@use 'bulma/sass/elements/box';
<!-- Basic box -->
<div class="box">
  <p>This content is inside a box.</p>
</div>

<!-- Box with media -->
<div class="box">
  <article class="media">
    <div class="media-left">
      <figure class="image is-64x64">
        <img src="avatar.jpg" alt="Avatar">
      </figure>
    </div>
    <div class="media-content">
      <div class="content">
        <p><strong>John Smith</strong> <small>@johnsmith</small></p>
        <p>Box content with media object inside.</p>
      </div>
    </div>
  </article>
</div>

Notification

Alert and notification messages with dismissal functionality and color variants.

/**
 * Import notification styles
 */
@use 'bulma/sass/elements/notification';
<!-- Basic notifications -->
<div class="notification">
  <button class="delete"></button>
  This is a default notification.
</div>

<div class="notification is-primary">
  <button class="delete"></button>
  This is a primary notification.
</div>

<div class="notification is-success">
  <button class="delete"></button>
  This is a success notification.
</div>

<div class="notification is-warning">
  <button class="delete"></button>
  This is a warning notification.
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  This is a danger notification.
</div>

<!-- Light notifications -->
<div class="notification is-primary is-light">
  Light primary notification
</div>

Table

Comprehensive table styling with various modifiers for appearance and behavior.

/**
 * Import table styles
 */
@use 'bulma/sass/elements/table';
<!-- Basic table -->
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Admin</td>
    </tr>
    <tr class="is-selected">
      <td>Jane Smith</td>
      <td>jane@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

<!-- Table modifiers -->
<table class="table is-bordered"><!-- Bordered table --></table>
<table class="table is-striped"><!-- Striped rows --></table>
<table class="table is-narrow"><!-- Narrow spacing --></table>
<table class="table is-hoverable"><!-- Row hover effects --></table>
<table class="table is-fullwidth"><!-- Full width --></table>

<!-- Responsive table -->
<div class="table-container">
  <table class="table">
    <!-- Table content -->
  </table>
</div>

Tags

Labels and badges for categorization and status indication.

/**
 * Import tag styles
 */
@use 'bulma/sass/elements/tag';
<!-- Basic tags -->
<span class="tag">Default</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>

<!-- Tag sizes -->
<span class="tag is-small">Small</span>
<span class="tag">Normal</span>
<span class="tag is-medium">Medium</span>
<span class="tag is-large">Large</span>

<!-- Tag combinations -->
<div class="tags">
  <span class="tag">JavaScript</span>
  <span class="tag">CSS</span>
  <span class="tag">HTML</span>
</div>

<!-- Tag with delete -->
<span class="tag is-success">
  Success
  <button class="delete is-small"></button>
</span>

<!-- Tag addons -->
<div class="tags has-addons">
  <span class="tag">Package</span>
  <span class="tag is-primary">v1.0.0</span>
</div>

Title and Subtitle

Typography for headings and subheadings with size variants.

/**
 * Import title styles
 */
@use 'bulma/sass/elements/title';
<!-- Basic titles -->
<h1 class="title">Main Title</h1>
<h2 class="subtitle">Subtitle text</h2>

<!-- Title sizes -->
<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>

<!-- Subtitle sizes -->
<p class="subtitle is-1">Subtitle 1</p>
<p class="subtitle is-2">Subtitle 2</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="subtitle is-5">Subtitle 5</p>
<p class="subtitle is-6">Subtitle 6</p>

<!-- Spaced titles -->
<h1 class="title is-spaced">Spaced Title</h1>
<h2 class="subtitle">This subtitle has more space above</h2>

Image

Responsive image containers with aspect ratio control.

/**
 * Import image styles
 */
@use 'bulma/sass/elements/image';
<!-- Responsive images -->
<figure class="image">
  <img src="image.jpg" alt="Responsive image">
</figure>

<!-- Fixed size images -->
<figure class="image is-16by9">
  <img src="image.jpg" alt="16:9 ratio">
</figure>

<figure class="image is-4by3">
  <img src="image.jpg" alt="4:3 ratio">
</figure>

<figure class="image is-square">
  <img src="image.jpg" alt="Square image">
</figure>

<!-- Fixed dimension images -->
<figure class="image is-128x128">
  <img src="avatar.jpg" alt="128x128 avatar">
</figure>

<figure class="image is-64x64">
  <img src="avatar.jpg" alt="64x64 avatar">
</figure>

<figure class="image is-48x48">
  <img src="avatar.jpg" alt="48x48 avatar">
</figure>

<figure class="image is-32x32">
  <img src="avatar.jpg" alt="32x32 avatar">
</figure>

Progress Bar

Progress indicators for loading states and completion tracking.

/**
 * Import progress bar styles
 */
@use 'bulma/sass/elements/progress';
<!-- Basic progress bars -->
<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress is-primary" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>
<progress class="progress is-danger" value="90" max="100">90%</progress>

<!-- Progress sizes -->
<progress class="progress is-small" value="25" max="100">25%</progress>
<progress class="progress" value="50" max="100">50%</progress>
<progress class="progress is-medium" value="75" max="100">75%</progress>
<progress class="progress is-large" value="100" max="100">100%</progress>

<!-- Indeterminate progress -->
<progress class="progress is-primary" max="100">Indeterminate</progress>

Delete Button

Small delete/close button for dismissing elements.

/**
 * Import delete button styles
 */
@use 'bulma/sass/elements/delete';
<!-- Delete buttons -->
<button class="delete"></button>
<button class="delete is-small"></button>
<button class="delete is-medium"></button>
<button class="delete is-large"></button>

<!-- Delete in context -->
<div class="notification is-primary">
  <button class="delete"></button>
  Notification with delete button.
</div>

<div class="message">
  <div class="message-header">
    <p>Message Title</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    Message with delete button in header.
  </div>
</div>