H1 RailsH1 Rails
H1 Rails
Base Styles
Better Select
Demos
Code
H1 Rails
Base Styles
Better Select
Demos
Code
  • Home

    • Base Styles
    • Design Goals
    • Customization
    • Examples
  • Elements

    • Box
    • Title Pairs
    • Buttons
    • Modals
    • Toasts
    • Tooltips
    • Forms
    • Floating Labels
    • Toggle
    • Select
    • /base-styles/shimmer.html
    • /base-styles/button-group.html
    • /base-styles/eyebrow.html
    • /base-styles/tabnav.html
    • Search Input
    • Container

Examples

The purpose of this page is to showcase some of the elements at-a-glance. If you want to see the code for an element, either view the source on this page, or go to the specific page of the element you're interested in.

.ui-button

Just a link

.ui-toggle

Toggle

Use the .ui-toggle class. See markup for details.

.ui-form

Back
Save Draft

.ui-floating-input

.ui-tabnav

Tabnavs

Groups of links spread out horizontally

Ares

Hades

Content
The main content
Setup
Configure Your Integration

.ui-search-input

Search Input
Use within a form or as standalone

.ui-tuple

Tuples

A tuple is a div with a separator, content on the left, and content on the right.

Business Starter Plan

Get custom email (@yourcompany.com), 100 participant video meetings, and more.

Upgrade

Business Starter Plan

Get custom email (@yourcompany.com), 100 participant video meetings, and more.

Upgrade

.ui-tooltip

Tooltips

Tooltips are based on hint.css. Currently they don't support html content.

.ui-box

Title
Description
Put the content of your bottom section here

.ui-titlepair

This is a large title pair
With Description
This is a normal title pair
With Description
This is a small title pair
With Description

Tables (Todo)

This is still a work in progress and will take some time to complete
First NameLast NameEmail
JohnDoeJohnDoeJohnDoeJohnDoeJohnDoe
JohnDoeJohnDoeJohnDoeJohnDoeJohnDoe
Last Updated:
Contributors: Tony Ennis
Prev
Customization

On This Page

  • .ui-button
  • .ui-toggle
  • .ui-form
  • .ui-floating-input
  • .ui-tabnav
  • .ui-search-input
  • .ui-tuple
  • .ui-tooltip
    • .ui-box
  • .ui-titlepair