Skip to content
Orbix Laravel · Tailwind CSS v1.0.5

Using components

Orbix components are plain HTML with fd-* classes (BEM naming) and, for interactive ones, a data-fd-* attribute that the bundled behaviors pick up automatically – there is nothing to initialize. The UI, Forms and Tables pages of the template show every component; open the Blade view of a page to copy its markup.

In the snippets below, replace the translation keys with your own (see Languages).

Buttons

<button type="button" class="fd-btn fd-btn--primary"><span class="fd-btn__label">Save changes</span></button>
<button type="button" class="fd-btn fd-btn--secondary"><span class="fd-btn__label">Cancel</span></button>
<button type="button" class="fd-btn fd-btn--ghost fd-btn--sm"><span class="fd-btn__label">Preview</span></button>
<button type="button" class="fd-btn fd-btn--danger"><span class="fd-btn__label">Delete</span></button>
<button type="button" class="fd-btn fd-btn--ghost fd-btn--icon" aria-label="Settings">
  <svg class="fd-icon" aria-hidden="true"><use href="#lc-settings"/></svg>
</button>

Cards

<article class="fd-card" aria-labelledby="card-title">
  <header class="fd-card__header">
    <div class="fd-card__heading">
      <h2 class="fd-card__title" id="card-title">Monthly revenue</h2>
      <p class="fd-card__subtitle">Last 30 days</p>
    </div>
  </header>
  <div class="fd-card__body"><p class="fd-text-muted">Card content.</p></div>
  <footer class="fd-card__footer">
    <button type="button" class="fd-btn fd-btn--primary fd-btn--sm"><span class="fd-btn__label">View report</span></button>
  </footer>
</article>

Stat (KPI) tiles

data-fd-format formats the value for the active language (number, currency, percent):

<div class="fd-kpis">
  <section class="fd-stat" aria-labelledby="kpi-orders">
    <div class="fd-stat__header">
      <h2 class="fd-stat__label" id="kpi-orders">Orders</h2>
      <span class="fd-stat__icon" aria-hidden="true"><svg class="fd-icon"><use href="#lc-shopping-bag"/></svg></span>
    </div>
    <p class="fd-stat__value" data-fd-format="currency" data-digits="0" data-value="48250">$48,250</p>
  </section>
</div>

Alerts and badges

<div class="fd-alert fd-alert--success" role="status">
  <svg class="fd-icon fd-alert__icon" aria-hidden="true"><use href="#fd-i-success"/></svg>
  <div class="fd-alert__content">
    <p class="fd-alert__title">Payment received</p>
    <p>The invoice was paid in full.</p>
  </div>
</div>

<span class="fd-badge fd-badge--success">Paid</span>
<span class="fd-badge fd-badge--warning">Pending</span>
<span class="fd-badge fd-badge--danger">Overdue</span>

Form fields

<div class="fd-field">
  <label class="fd-field__label" for="email">Email</label>
  <input class="fd-input" id="email" type="email" autocomplete="email">
</div>
<div class="fd-field">
  <label class="fd-field__label" for="website">Website</label>
  <div class="fd-input-wrap">
    <svg class="fd-icon fd-input-wrap__icon" aria-hidden="true"><use href="#lc-globe"/></svg>
    <input class="fd-input" id="website" type="url">
  </div>
</div>

The password field with a visibility toggle and the one-time code input are Blade components: <x-forms.password /> and <x-forms.otp /> (see resources/views/components/forms/).

Tables

<div class="fd-table-wrap" tabindex="0" role="region" aria-label="Invoices">
  <table class="fd-table">
    <thead><tr><th scope="col">Invoice</th><th scope="col">Customer</th><th scope="col">Status</th></tr></thead>
    <tbody>
      <tr><td>INV-2048</td><td>Northwind Ventures</td><td><span class="fd-badge fd-badge--success">Paid</span></td></tr>
    </tbody>
  </table>
</div>

The Tables → Data table page shows the data grid with sorting, search, column filters, selection and pagination (resources/js/pages/tables.ts).

Modals

<button type="button" class="fd-btn fd-btn--primary" data-fd-modal-open="modal-invite" aria-haspopup="dialog">
  <span class="fd-btn__label">Invite member</span>
</button>

<dialog class="fd-modal fd-modal--sm" id="modal-invite" aria-labelledby="modal-invite-title" data-fd-modal>
  <div class="fd-modal__header">
    <div class="fd-modal__heading"><h2 class="fd-modal__title" id="modal-invite-title">Invite member</h2></div>
  </div>
  <div class="fd-modal__body"><p>Modal content.</p></div>
  <div class="fd-modal__footer">
    <button type="button" class="fd-btn fd-btn--secondary" data-fd-modal-close><span class="fd-btn__label">Close</span></button>
  </div>
</dialog>

Tabs

<div class="fd-tabs" data-fd-tabs>
  <div class="fd-tabs__list" role="tablist" aria-label="Settings">
    <button type="button" class="fd-tabs__tab" role="tab" id="tab-general" aria-controls="panel-general" aria-selected="true">General</button>
    <button type="button" class="fd-tabs__tab" role="tab" id="tab-billing" aria-controls="panel-billing" aria-selected="false" tabindex="-1">Billing</button>
  </div>
  <div class="fd-tabs__panel" role="tabpanel" id="panel-general" aria-labelledby="tab-general" tabindex="0">General settings</div>
  <div class="fd-tabs__panel" role="tabpanel" id="panel-billing" aria-labelledby="tab-billing" tabindex="0" hidden>Billing settings</div>
</div>
<div class="fd-dropdown" data-fd-dropdown>
  <button type="button" class="fd-btn fd-btn--secondary" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-actions">
    <span class="fd-btn__label">Actions</span>
  </button>
  <div class="fd-menu" role="menu" id="menu-actions" hidden>
    <button type="button" class="fd-menu__item" role="menuitem" tabindex="-1"><span class="fd-menu__label-text">Edit</span></button>
    <hr class="fd-menu__separator" role="separator">
    <button type="button" class="fd-menu__item fd-menu__item--danger" role="menuitem" tabindex="-1"><span class="fd-menu__label-text">Delete</span></button>
  </div>
</div>

Toasts

From markup:

<button type="button" class="fd-btn fd-btn--secondary" data-fd-toast data-variant="success"
        data-title="Saved" data-body="Your changes were saved.">Show toast</button>

From JavaScript:

import { toast } from '@foundry/ui';

toast({ title: 'Saved', body: 'Your changes were saved.', variant: 'success', closeLabel: 'Dismiss' });

Grid

Responsive 12-column grid with logical gaps:

<div class="fd-row">
  <div class="fd-col-12 fd-col-md-6 fd-col-xl-4">…</div>
  <div class="fd-col-12 fd-col-md-6 fd-col-xl-8">…</div>
</div>

Accessibility

Components ship with the right roles and keyboard support (menus, tabs, modals, comboboxes, date pickers). Keep the aria-* attributes from the examples, give every icon-only button an aria-label, and use aria-hidden="true" on decorative icons.