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