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 inlcuding 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

Wine

.fizz-text-eyebrow

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>
<p class="fizz-text-eyebrow">Wine</p>

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

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>

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 class="undefined" role="img" aria-hidden="true" width="24" height="24">
      <use href="#tag"></use>
    </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 class="undefined" role="img" aria-hidden="true" width="24" height="24">
      <use href="#tag"></use>
    </svg>
  <span><a href="#">Joseph Cartron - 50 case mix deal</a> applied- $10.60 off per case</span>
</p>

Truncation

Add .fizz-truncate to an element to prevent wrapping and append an ellipsis (...) where text overflows the container.

Here's some text that has been truncated.

HTML

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

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

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>

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>