Increasing engagement with icons

Instead of bloating our themes with extra font files containing icons that you may or may not use, we inline SVG icons which offer better page load performance and improved accessibility over font-based icon systems. Zendesk’s default Copenhagen theme recently made the same change with the release of the new theming API.

Our Icons page contains an excellent starter set of icons and there are many collections (and thousands of icons) available online for free like Bootstrap Icons, Heroicons and Icons8.

For more information about the differences between font-based and inline SVG icons, refer to this article.

Usage

Use .svg-icon with an inline SVG icon to make it scale in relation to surrounding text.

Heading 1

Heading 2

Heading 3

A paragraph of text

<h1 class="my-4">Heading 1 <svg class="svg-icon">...</svg></h1>
<h2 class="my-4">Heading 2 <svg class="svg-icon">...</svg></h2>
<h3 class="my-4">Heading 3 <svg class="svg-icon">...</svg></h3>
<p>A paragraph of text <svg class="svg-icon">...</svg></p>

A variety of different icons are included within each of our themes, which you can mix-and-match.

Some examples of commonly used SVG icons include:

thumbs-up

thumbs-down

star

chevron-up

chevron-right

chevron-down

chevron-left

arrow-up

arrow-right

arrow-down

arrow-left

gear

Sizes

Use font size or sizing utilities can be used to control how large an icon appears.

<svg class="svg-icon text-red-500"></svg>
<svg class="svg-icon text-red-500 font-size-2xl"></svg>
<svg class="svg-icon text-red-500 h-6 w-6"></svg>

Colors

Use .fill-current or .stroke-current to set the fill or stroke color of the SVG to the current text color. Text color utilities can then be used to control the color of an icon.

<svg class="svg-icon font-size-2xl fill-current p-2 text-red-500"></svg>
<svg class="svg-icon font-size-2xl fill-current p-2 text-green-500"></svg>
<svg class="svg-icon font-size-2xl fill-current p-2 text-orange-500"></svg>
<svg class="svg-icon font-size-2xl fill-current p-2 text-gray-600"></svg>

Drawing attention to information with call outs

A great way to highlight important aspects of your content is to use callouts. These are typically expressed as tips or notes, though the specific language used should be consistent with your company’s brand.

This is an example of a standard note available in all themes. You can apply this style to any content by simply applying the .note class name to a paragraph or container element.

<p class="note">
  This is an example of a standard note available in all themes. You can apply this 
  style to any content by simply applying the <code>.note</code> class name to a 
  paragraph or container element.
</p>

Warning styles can help draw visitor attention to important information:

This is an example of a standard warning available in all themes. You can apply this style to any content by simply applying the .warning class name to a paragraph or container element.

<p class="warning">
  This is an example of a standard warning available in all themes. You can apply this 
  style to any content by simply applying the <code>.warning</code> class name to a 
  paragraph or container element.
</p>

Different styles can be created using custom CSS or utilities.

Caution

This is an example of a custom notification using utilities. You can easily customize this to suit the look-and-feel of your theme or create your own.

<div class="border-left border-4 bg-orange-100 text-orange-600 border-orange-500 px-5 py-1 mb-4">
  <h4 class="text-inherit text-orange-500 mt-4 mb-2">
    Caution
  </h4>
  <p>
    This is an example of a custom notification using utilities. You can easily 
    customize this to suit the look-and-feel of your theme or create your own.
  </p>
</div>

Each style can be used with our set of font and SVG icons to add extra visual appeal.

Boxes

Information that’s related to the main content of the page but more of an aside can be displayed within a box. As with all of our patterns, you can customize the appearance to meet your requirements using our utilities (for example, box shadows).

In summary

This was an important point
As was this
And even this
The final and most important point

<div class="px-6 py-4 border border-radius shadow-xs">
  <h3>
    In summary
  </h3>
  <ul class="list-check my-5">
    <li class="list-item">This was an important point</li>
    <li class="list-item">As was this</li>
    <li class="list-item">And even this</li>
    <li class="list-item">The final and most important point</li>
  </ul>
</div>

Getting technical with code blocks

The <code> and <pre> elements are for displaying inline and multiline blocks of code.

Usage

Use the <code> element for inline code snippets.

The push() method adds one or more elements to the end of an array and returns the new length of the array.

<p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>

Use the <pre> element for multiple lines of code.

  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire

<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

Use <kbd> for input that is typically entered via keyboard.

To edit settings, press ctrl + s

<p>To edit settings, press <kbd>ctrl</kbd> + <kbd>s</kbd></p>

Adding figures and images to articles

Use the <figure> element to display self-contained content, like illustrations, images, photos or code. For image-specific styles, refer to the Images page.

Usage

Use the <figcaption> element to display a caption for a given <figure>.

Test image — This is a caption for the image.

<figure>
  <img class="img-fluid" src="..." alt="...">
  <figcaption class="mt-4">This is a caption for the image.</figcaption>
</figure>

Use text align utilities to align the caption relative to the image.

<figure>
  <img class="img-fluid" src="..." alt="...">
  <figcaption class="mt-4 text-right">This is a caption for the image.</figcaption>
</figure>

Image styles

Images often play an important role in content, providing useful information and helping to illustrate points. Images can be displayed within <figure> elements and given an optional caption using the <figcaption> element.

Using a few simple class names, you can change the alignment of your images and even have them extend slightly beyond the content area for added effect.

Use .float-left to have an image float to the left of the content. Responsive variants allow you to control the float based on screen size.

There should be some space above, below and on the appropriate side of the image to ensure separation between the image and surrounding text. This will make the page look better and improve readability.

Margin utilities allow you to apply spacing around the image and reposition the element on larger screen sizes. Text alignment utilities can be used to control the alignment of the caption.

The left-aligned example uses .my-5 and .lg:mr-6 to apply margin around the entire element and lg:-ml-6 to shift the image further to the left on large screen sizes.

Use .float-right to achieve a similar (but opposite) effect. Consider using other utilities, for example borders and background colors, to add further interest to your images or apply your own styles to figures or images within the content area (.content) using custom CSS.

When floating elements it may occasionally be necessary to use .clearfix to ensure content remains within the content area.

Customizing list styles

Use .list-unstyled to remove the default styling from <ol> and <ul> elements.

List item
List item
List item

<ul class="list-unstyled">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Use .list-item to add additional space around each list item.

List item
List item
List item

<ul class="list-unstyled">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ul>

Lorem ipsum dolor sit amet, adipiscing elit.
Nulla vitae elit libero, a pharetra augue.
- Donec id elit non mi porta gravida at eget metus.
- Quisque fringilla elit quis purus consectetur.

<ul>
  <li class="list-item">Lorem ipsum dolor sit amet, adipiscing elit.</li>
  <li class="list-item">Nulla vitae elit libero, a pharetra augue.
    <ul>
      <li class="list-item">Donec id elit non mi porta gravida at eget metus.</li>
      <li class="list-item">Quisque fringilla elit quis purus consectetur.</li>
    </ul>
  </li>
</ul>

List style utilities provide additional control over the look-and-feel of lists.

Numbered list

Use .list-number to apply a custom numbered style to a list.

List item
List item
List item

<ol class="list-number">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ol>

Check list

Use .list-check to apply a custom checklist style to a list.

List item
List item
List item

<ul class="list-check">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ul>

Divider list

Use .divider-list to present list items in a horizontal list separated by a divider.

List item
List item
List item

<ul class="list-divider">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

The data-divider attribute allows you to override the divider applied before a given list item:

List item
List item
List item

<ul class="list-divider">
  <li>List item</li>
  <li data-divider=">">List item</li>
  <li data-divider="/">List item</li>
</ul>

We use this element in our themes to present call-to-actions, menus and lists of articles.

Emphasizing points with block and pull-quotes

Blockquotes

Use <blockquote> for quoting blocks of content from another source within your document.

Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.

Mikkel Svane in Startupland

<blockquote class="font-size-lg">
  <p>
    Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.
  </p>
  <footer class="text-gray-500">
    Mikkel Svane in <cite title="Source Title">Startupland</cite>
  </footer>
</blockquote>

Pull-quotes

You can also emphasize parts of your content using utilities or your own custom elements. The following paragraphs help prove this point by providing a body of text in which a pull-quote can be placed.

“Your most unhappy customers are your greatest source of learning.”

You’ll notice that the quote itself is made larger and bolder using typography utilities. Space is added around the element and, on large screens, shifted left using margin utilities.

There’s really no limit to what you can do with our utilities. Of course you could create a right-aligned version that looked much the same, or create your own unique versions.

Draw inspiration from what you see online, get excited and get creating!

Organizing information in tables

Tables are useful for layouts where text needs to be positioned side-by-side or floating at specific locations on the page. If making these is frustrating with the usual layout tools, try using a table.

Standard table

Use .table with a <table> element for a standard table.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Use .hover:bg-{color} utilities to create hover effects on rows:

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hover:bg-gray-100">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="hover:bg-gray-100">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="hover:bg-gray-100">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bordered table

Use .table-bordered with .table for borders on all sides of the table and cells.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Borderless table

Use .table-borderless with .table for a table without borders.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Sizes

Use .table-sm with .table to create a compact table with half the padding.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Responsive

Wrap a .table with the .scroll-x utility to make it horizontally scrollable across every breakpoint.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<div class="scroll-x">
  <table class="table">
    ...
  </table>
</div>

Add a {screen}: prefix to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

Creating beautiful content with text styles

You can make the font size of a paragraph of text larger by giving it a class name of font-size-xl using the Source Code editor when editing an article. This can be used to emphasize a point or summarize the content of the article.

This article provides an overview of some of the most common typographic elements used in articles, covering everything from headings and blockquotes to tabs and toggles. Many of these elements are applied using the editor toolbar and their appearance may differ between themes.

Headings

Use .h1 through .h6 classes when you want to match the font styling of a heading but cannot use the associated HTML element.

h1

The quick brown fox jumped over the lazy dog.

h2

The quick brown fox jumped over the lazy dog.

h3

The quick brown fox jumped over the lazy dog.

h4

The quick brown fox jumped over the lazy dog.

h5

The quick brown fox jumped over the lazy dog.

h6

The quick brown fox jumped over the lazy dog.

<h1 class="truncate ...">The quick brown fox jumped over the lazy dog.</h1>
<h2 class="truncate ...">The quick brown fox jumped over the lazy dog.</h2>
<h3 class="truncate ...">The quick brown fox jumped over the lazy dog.</h3>
<h4 class="truncate ...">The quick brown fox jumped over the lazy dog.</h4>
<h5 class="truncate ...">The quick brown fox jumped over the lazy dog.</h5>
<h6 class="truncate ...">The quick brown fox jumped over the lazy dog.</h6>

Use font size utilities when you need to create larger (or smaller) headings.

Inline text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Abbreviations

The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym.

Use the optional title attribute to provide an expansion or description for the abbreviation.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Search

Adding visually engaging elements to content

Usage

Heading 1

Heading 2

Heading 3

Sizes

Colors

Caution

Boxes

In summary

Usage

Usage

Image styles

Numbered list

Check list

Divider list

Blockquotes

Pull-quotes

Standard table

Bordered table

Borderless table

Sizes

Responsive

Headings

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

Inline text elements

Abbreviations