Elements

The basic building blocks, called with the {ui} tag.

Elements are the foundation: a button, a badge, a card, an alert, a field, a table, a breadcrumb, a separator, a spinner, an avatar, a progress bar, a skeleton, a status dot, a list, a menu, an accordion, a dropdown and a tooltip. Each is one Latte partial with a few params and plain CSS. They are the core of the UI: simple, common and standard, each doing one thing, and they combine by nesting, a field in a card and a button in its footer. The components build on them, and an element never uses a component.

How to call elements, set them up, vary them and theme them is on the UI overview and theming.

Elements

  • Button

    An action, or a link that looks like one.
  • Badge

    A short label for a status or a count.
  • Card

    A bordered surface with an optional header, body and footer.
  • Alert

    A callout for a message the reader should not miss.
  • Field

    A form control with its label, hint and error: input, textarea, select, checkbox, radio or switch.
  • Table

    Rows and columns from two lists.
  • Breadcrumb

    The trail of pages that leads to the current one.
  • Separator

    A thin line between two groups of content.
  • Spinner

    A small rotating ring that shows something is loading.
  • Avatar

    A round image of a person or thing, with initials when there is no image.
  • Progress

    A bar that shows how far along something is, or that it is still working.
  • Skeleton

    A pulsing placeholder that holds the space while content loads.
  • Status

    A small coloured dot that shows a state at a glance.
  • List

    Bordered rows with a title, a description and a trailing note.
  • Menu

    A vertical list of links, with headings and groups that open.
  • Accordion

    Sections that open and close to show or hide their content.
  • Dropdown

    A button that opens a floating panel of links or content.
  • Tooltip

    A short tip that appears when an element is hovered or focused.