Typefaces

Types

There are a handful of custom typefaces we use in most instances in the fundraising software. They include heading, subheading, title, body, and caption. There are other options for typefaces and headings (other sizes). Use heading to define a section of content. Use subheading to define sub-sections within a main section. Use body in most instances of basic text and caption in scenarios where it provides contextual help. In most cases, caption is paired with the :muted trait to lessen its visual noise.

This is heading text.

This is subheading text.

This is title text.

This is body text.

This is caption text.

= ui.nfg :typeface, heading: 'This is heading text.'

= ui.nfg :typeface, subheading: 'This is subheading text.'

= ui.nfg :typeface, title: 'This is title text.'

= ui.nfg :typeface, body: 'This is body text.'

= ui.nfg :typeface, caption: 'This is caption text.'

<h5>This is heading text.</h5>
<h6>This is subheading text.</h6>
<h6>This is title text.</h6>
<p>This is body text.</p>
<p class="font-size-sm">This is caption text.</p>

Themes

There are multiple options for adding colors to typefaces. Add a trait to apply the color.

This is success text.

This is danger text.

This is muted text.

= ui.nfg :typeface, :success, body: 'This is success text.'
= ui.nfg :typeface, :danger, body: 'This is danger text.'
= ui.nfg :typeface, :muted, body: 'This is muted text.'

<p class="text-success">This is success text.</p>
<p class="text-danger">This is danger text.</p>
<p class="text-muted">This is muted text.</p>

Icons

This is an easy way to add an icon to the left of the text. Refer to the icons component on other ways to use icons and text together.

This text has an icon to the left.

= ui.nfg :typeface, body: 'This text has an icon to the left.', icon: 'rocket'

<p><i aria-hidden="true" class="fa fa-rocket mr-1"></i> This text has an icon to the left.</p>

Miscellaneous

The option to use a do block is available for typefaces in order to render out more complex content.

This typeface is using a do block.

= ui.nfg :typeface, :body do
  This typeface is using a do block.

<p>This typeface is using a do block.
</p>

Traits

The typeface component has these avaiable traits.