Subtitles are functionally identical to Bulma subtitles.

<p class="subtitle is-xl">Subtitle X-Large</p>
              <p class="subtitle is-l">Subtitle Large</p>
              <p class="subtitle is-m">Subtitle Medium</p>
              <p class="subtitle is-s">Subtitle Small</p>

Subtitle X-Large

Subtitle Large

Subtitle Medium

Subtitle Small

Subtitles act as titles for small chunks of content. Rarely are subtitle styles placed directly under subtitles, but should typically be placed under a title styling.

<p class="title is-m">A Truly Inspiring Heading</p>
              <p class="subtitle is-l">A Boy Beyond Space and Time</p>
              
              <p class="title is-s">Futuristic Book Lifestyle</p>
              <p class="subtitle is-m">Functional Decomposition For Composers</p>

A Truly Inspiring Heading

A Boy Beyond Space and Time

Futuristic Book Lifestyle

Functional Decomposition For Composers

Body text makes up the bulk of a page’s content. This includes a few words as well as long form paragraphs. Four sizes are available, and is-size-m matches the default sizes for the page. These can be applied to any text element, not just paragraphs.

We currently make no use of Bulma's numeric sizing classes (is-size-1, is-size-2, et al) in this design system.

<p class="is-size-xl mb-5">Lorem ipsum dolor sit amet... </p>
              <p class="is-size-l mb-5">Lorem ipsum dolor sit amet... </p>
              <p class="is-size-m mb-5">Lorem ipsum dolor sit amet... </p>
              <p class="is-size-s">Lorem ipsum dolor sit amet... </p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, tenetur cupiditate harum quis vero, beatae, unde perspiciatis ducimus odit velit facilis consectetur. Ullam molestiae ratione eligendi voluptate vero similique nesciunt!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, natus eius velit necessitatibus dolorem accusamus non veniam perspiciatis blanditiis harum molestias dolor omnis. At aliquam ex voluptas ut et dolorum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate architecto ratione voluptas iusto, maxime, debitis nihil, eius distinctio alias incidunt ullam repellendus veniam repudiandae laboriosam odit minus! Deleniti, ipsum sit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet similique fugit inventore quo? Iusto eos voluptatibus quasi, beatae in culpa ducimus delectus deleniti veritatis ex, praesentium dignissimos omnis id alias.

Tags are just a word or two used to describe or append components, data, navigation, or small bits of content. They're based onBulma tags, but their use is currently scoped only to the examples below.

<span class="tag is-l">Tag Large</span>
              <span class="tag is-m">Tag Medium</span>
              <span class="tag is-s">Tag Small</span>

Rectangles divide space. Their fill color is what creates this division. Rectangles divide headers, side bars, body, banners, and footers. They run edge to edge no margin. Rectangles with sharp corners should never be used for actions, avatars, or containers with margins.

This is a default style where appropriate.

Circles are used for avatars such as affiliate avatars. They’re also used for textless actions like icon buttons.

Use the is-circle class to add this effect.

Pills are primary used for actions like buttons or search components. They’re also used to wrap variable data for badges.

Use the is-pill class to add this effect.

Rounded rectangles are used for containers that sit within pieces of content such as modals, inputs, or cards.

Use the is-rounded class to add this effect.

We used Bulma's spacing helpers but with modified values to match our needs, with values from 0-8. Refer to the Bulma docs for details.

Low Elevation

Changing the elevation of an interactive object, like a button, is a way to signify the object is focused, selected, or hovered. During this state, the object still sits side by side with other objects on the surface, it doesn’t cover or disable any other objects. The color of the hover is selected by the fill or stroke of that object.

Use .has-low-elevation on any element for this effect.