Text

Headings

Fizz removes the default styling from header elements to encourage their semantically correct use, rather than using a specific header element for its visual style. You can apply .fizz-heading classes to any element, but you should try to limit their use to <h1>-<h6> elements.

Headings include styles for font-weight, font-size and line-height, but margins should be applied using spacing utilities. By not including margins in the heading styles, we can account for their use in different contexts without developers needing to override any styles.

Beverage Ordering Has Never Been Easier

.fizz-heading-1

Beverage Ordering Has Never Been Easier

.fizz-heading-2

Beverage Ordering Has Never Been Easier

.fizz-heading-3

Beverage Ordering Has Never Been Easier

.fizz-heading-4

HTML

<h1 class="fizz-heading-1">Beverage Ordering Has Never Been Easier</h1>
<h2 class="fizz-heading-2">Beverage Ordering Has Never Been Easier</h2>
<h3 class="fizz-heading-3">Beverage Ordering Has Never Been Easier</h3>
<h4 class="fizz-heading-4">Beverage Ordering Has Never Been Easier</h4>

Body Text

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

.fizz-text-large

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

.fizz-text-medium

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

.fizz-text-small

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

.fizz-text-tiny

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

.fizz-text-eyebrow

HTML

<p class="fizz-text-large">Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by
  managing orders in one place, from any device, for FREE.</p>
<p class="fizz-text-medium">Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by
  managing orders in one place, from any device, for FREE.</p>
<p class="fizz-text-small">Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by
  managing orders in one place, from any device, for FREE.</p>
<p class="fizz-text-tiny">Make the ordering process a breeze. As a bar, retailer or sales rep, you
  can save time by managing orders in one place, from any device, for FREE.</p>
<p class="fizz-text-eyebrow">Make the ordering process a breeze. As a bar, retailer or sales rep, you
  can save time by
  managing orders in one place, from any device, for FREE.</p>
<p class="fizz-text-medium fizz-stack-16"><strong>.fizz-text-eyebrow</strong></p>

Emphasis

Use emphasis to further differentiate text styles and provide heirarchy. Strong text uses Semibold (600), while subdued text applies a lighter text color.

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

.fizz-text-strong

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

.fizz-text-subdued

Alignment

Center

Use .fizz-text-center to center text within an element.

This text is centered.

HTML

<p class="fizz-text-center">This text is centered.</p>

Use .fizz-text-center-on-small to only center text when the viewport is less than than 700px.

This text only centered on small screens (< 700px).

HTML

<p class="fizz-text-center-on-small">This text only centered on small screens (< 700px).</p>

Use .fizz-text-center-on-large to only center text when the viewport is greater than 700px.

This text only centered on large screens (> 700px).

HTML

<p class="fizz-text-center-on-large">This text only centered on large screens (> 700px).</p>

Right

Use .fizz-text-right to right-align text within an element.

This text is right-aligned.

HTML

<p class="fizz-text-right">This text is right-aligned.</p>

Left

Use .fizz-text-left to left-align text within an element. Left alignment is the default, so you'll only need to apply this if you're overriding a different text alignment.

This text is left-aligned.

HTML

<p class="fizz-text-left">This text is left-aligned.</p>

Prevent text wrapping

Use .fizz-nowrap (or .fizz-no-wrap) to prevent text from wrapping within its container. Useful for table cells or buttons. Be careful, since if the text is too long, you may overflow the width of the container or even the viewport, causing a horizontal scrollbar.

Table Caption
Distributor	Due Date	Status	Invoice	Amount
Strava-IL	Aug 18, 2020	Overdue 20 Days	#12345	$1,065.40
Strava-IL	Aug 18, 2020	Overdue 10 Days	#12345	$65.01
Strava-IL	Aug 18, 2020	Paid	#12345	$65.01

HTML

<table class="fizz-table fizz-table-cell-borders">
      <caption>Table Caption</caption>
      <thead>
        <tr>
          <th>Distributor</th>
          <th width="30%">Due Date</th>
          <th width="35%">Status</th>
          <th>Invoice</th>
          <th class="fizz-align-right">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Distributor">Strava-IL</td>
          <td data-label="Due Date"
              class="fizz-nowrap">Aug 18, 2020</td>
          <td data-label="Status"
              class="fizz-nowrap"><span class="fizz-pill-red">Overdue</span> <span
                  class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
          <td data-label="Invoice">#12345</td>
          <td data-label="Amount"
              class="fizz-align-right">$1,065.40</td>
        </tr>
        <tr>
          <td data-label="Distributor">Strava-IL</td>
          <td data-label="Due Date"
              class="fizz-nowrap">Aug 18, 2020</td>
          <td data-label="Status"
              class="fizz-nowrap"><span class="fizz-pill-yellow">Overdue</span> <span
                  class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
          <td data-label="Invoice">#12345</td>
          <td data-label="Amount"
              class="fizz-align-right">$65.01</td>
        </tr>
        <tr>
          <td data-label="Distributor">Strava-IL</td>
          <td data-label="Due Date"
              class="fizz-nowrap">Aug 18, 2020</td>
          <td data-label="Status"
              class="fizz-nowrap"><span class="fizz-pill-green">Paid</span></td>
          <td data-label="Invoice">#12345</td>
          <td data-label="Amount"
              class="fizz-align-right">$65.01</td>
        </tr>
      </tbody>
    </table>

Icon Text

Used to add an icon to the left of text.

10 Case QTY deal available - $20.20 off per case

Joseph Cartron - 50 case mix deal applied- $10.60 off per case

HTML

<p class="fizz-icon-text-small fizz-text-subdued fizz-stack-16"> <svg viewBox="0 0 24 24">
        <path
              d="m21.41 11.58-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42ZM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7Z">
        </path>
      </svg>
      <span><a href="#">10 Case QTY deal</a> available - $20.20 off per case</span>
    </p>

    <p class="fizz-icon-text-small fizz-text-deal fizz-stack-16"> <svg viewBox="0 0 24 24">
        <path
              d="m21.41 11.58-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42ZM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7Z">
        </path>
      </svg>
      <span><a href="#">Joseph Cartron - 50 case mix deal</a> applied- $10.60 off per case</span>
    </p>

Truncation

There are two Fizz classes that help with truncating text to an element to prevent wrapping and append an ellipsis (...) where text overflows the container, .fizz-truncate and .fizz-truncate-lines.

Single Line

For a single line with a max-width, add thefizz-truncate class to the element.

The default width is 20ch, but you can override this by setting a CSS variable, --max-width, inline using whichever measurement you need (px, rem, ch, etc.) or setting the max-width to 100%.

Examples

Here's some text that has been truncated.

HTML

<p class="fizz-truncate">Here's some text that has been truncated.</p>

Here's some text that has been truncated.

HTML

<p class="fizz-truncate"
       style="--max-width: 30ch">Here's some text that has been truncated.</p>

Here's another example with a table.

Distributor	Invoice #	Amount Due
Starla-IL	12345	$1,065.40
Breakthru Beverage	12346	$2,018.20
Eagle Rock	12347	$330.00
Savannah Beer Company	12348	$10,000.00

HTML

<table class="fizz-table fizz-table-unresponsive fizz-table-condensed"
           style="width: 200px">
      <thead>
        <tr>
          <th width="25%">Distributor</th>
          <th class="fizz-nowrap fizz-text-right">Invoice #</th>
          <th class="fizz-nowrap fizz-text-right">Amount Due</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="fizz-truncate">Starla-IL</td>
          <td class="fizz-text-right">12345</td>
          <td class="fizz-text-right">$1,065.40</td>
        </tr>
        <tr>
          <td class="fizz-truncate">Breakthru Beverage</td>
          <td class="fizz-text-right">12346</td>
          <td class="fizz-text-right">$2,018.20</td>
        </tr>
        <tr>
          <td class="fizz-truncate">Eagle Rock</td>
          <td class="fizz-text-right">12347</td>
          <td class="fizz-text-right">$330.00</td>
        </tr>
        <tr>
          <td class="fizz-truncate">Savannah Beer Company</td>
          <td class="fizz-text-right">12348</td>
          <td class="fizz-text-right">$10,000.00</td>
        </tr>
      </tbody>
    </table>

Multi-line

For multiple lines, add the fizz-clamp class to the element. The default number of lines is 2, but can be edited with a CSS custom property --lines inline set to the number of lines you want the text to go.

Examples

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis veritatis doloremque vitae nihil beatae iure! Mollitia, atque sequi incidunt nam alias architecto iusto corporis, reprehenderit officia eligendi dolorem, autem libero!

HTML

<p class="fizz-clamp">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis veritatis doloremque
      vitae nihil beatae iure! Mollitia, atque sequi incidunt nam alias architecto iusto corporis, reprehenderit officia
      eligendi dolorem, autem libero!</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis veritatis doloremque vitae nihil beatae iure! Mollitia, atque sequi incidunt nam alias architecto iusto corporis, reprehenderit officia eligendi dolorem, autem libero!

HTML

<p class="fizz-clamp"
       style="--lines: 3; max-width: 200px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis veritatis
      doloremque
      vitae nihil beatae iure! Mollitia, atque sequi incidunt nam alias architecto iusto corporis, reprehenderit officia
      eligendi dolorem, autem libero!</p>

Underlines

Use .fizz-underline-none to remove the underline on links.

This link has no underline on hover.

Use .fizz-text-underline to apply an underline to a link, even when not hovered. Useful if you are overriding the default link color with .fizz-text-inherit.

This link is always underlined.

Use .fizz-underline-dashed to apply a dashed border to the bottom of text.

This text has a dashed underline.

HTML

<p><a href="#"
         class="fizz-underline-none">This link has no underline on hover.</a></p>

    <p><a href="#"
         class="fizz-text-underline fizz-text-subdued">This link is always underlined.</a></p>

    <p><span class="fizz-underline-dashed">This text has a dashed underline.</span></p>