Hey, how can we help you? Hey, how can we help you?

Formatting tools

Back to the article "How can I make my articles look stylish with a Premium Plus theme?"

Callouts Quotes Lists Buttons Tables Tabs Accordions

Callouts

Callouts perfectly help highlight content to make it stand out

Choose parameters for each block

Callout style (Mix 1)
Callout type (Solid Color)
Callout size (Medium)
Background > uses “Secondary bg color” in the theme settings (free choice)
Text color > uses “Primary Text color” in the theme settings (free choice)

Preview

Callout title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Source code

Copy the following code and insert it into the source code of the Zendesk article to the relevant space

<div class="callout">
  <h3>Callout title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Quotes

This tool helps you visualize your quotes

Choose parameters for each block

Quote style (Mix 1)
Quote type (No background color)
Callout size (Medium)
Background > uses white (fixed)
Left vertical line > uses “Primary Text color” in the theme settings (free choice)
Quotes > uses “Secondary background color” in the theme settings (free choice)
Text > uses “Primary Text color” in the theme settings (free choice)

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu odio ut orci lacinia interdum ut finibus erat. Proin facilisis tempus felis, vel porttitor magna tincidunt vehicula.

Source code

Copy the following code and insert it into the source code of the Zendesk article to the relevant space

<div class="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu odio ut orci lacinia
  interdum ut finibus erat. Proin facilisis tempus felis, vel porttitor magna tincidunt
  vehicula.
</div>

Lists

With this tool you can make your lists stand out.

Choose parameters for each block

List style (Mix 1)
List type (No background color)
Checkmarks, digits > uses “Primary color” in the theme settings (free choice)
Text > uses “Primary Text color” in the theme settings (free choice)

Preview

  • one
  • two
  • tree
  1. one
  2. two
  3. tree

Source code

Copy the following code and insert it into the source code of the Zendesk article to the relevant space

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>tree</li>
</ul>
<ol class="list">
  <li>one</li>
  <li>two</li>
  <li>tree</li>
</ol>

Buttons

This tool will help to display text as buttons

Choose parameters for each block

Button style (Mix 1)
Button size (Big)
Background > uses white (fixed)
Text&border > uses “Link color” in the theme settings (free choice)

Preview

My button

Source code

Copy the following code and insert it into the source code of the Zendesk article to the relevant space

<a class="btn" href="https://premiumplus.io">My button</a>
The button link can be changed behind href= in the code. Currently, the link leads to https://premiumplus.io, which can be replaced with any other link.

Tables

If you want to put more focus on the content in your tables, just apply this tool

Choose parameters for each block

Table style (Mix 1)
Table type (Bordered & Striped)
Heading and footer rows > uses “Secondary text color” in the theme settings (free choice)
Internal rows > uses “Primary background color” & “Secondary background color” in the theme settings (free choice)
Heading and footer text > uses white (fixed)
Main text > uses “Primary text color” in the theme settings (free choice)

Preview

Heading 1 Heading 2 Heading 3
Product 1 120 875
Product 2 110 768
Product 3 210 652
Product 4 120 875
Product 5 110 768
Footer 1 Footer 2 Footer 3

Source code

Copy the following code and insert it into the source code of the Zendesk article to the relevant space

<table class="table">
  <thead>
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>120</td>
      <td>875</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>110</td>
      <td>768</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>

Tabs

Keep your article well structured by using Tabs.

Choose parameters for each block

Tabs style (Mix)
Background of the active Tab > uses “Primary color” in the theme settings (free choice)
Text of the active Tab > uses white (fixed)
Background of inactive Tabs > uses “Secondary bg color” in the theme settings (free choice)
Text of inactive Tabs > uses “Primary text color” in the theme settings (free choice)
Background in a dropdown > uses “Primary background color” in the theme settings (free choice)
Text in a dropdown > uses “Primary text color” in the theme settings (free choice)

Preview

Tab 1 Tab 2 Tab 3

Source code

Copy the following code and insert it into the source code of the Zendesk article to the relevant space

<table class="tabs">
  <tbody>
    <tr>
      <td>Tab 1</td>
      <td>Tab 2</td>
      <td>Tab 3</td>
    </tr>
    <tr>
      <td>Tab content 1</td>
      <td>Tab content 2</td>
      <td>Tab content 3</td>
    </tr>
  </tbody>
</table>

View this video how to add and manage tabs.

Accordions

Accordions help you to structure your article content via dropdowns

Choose parameters for each block

Accordion style (Mix)
Background for the active heading > uses “Secondary background color” in the theme settings (free choice).
Background for inactive headings > uses “Secondary background color” in the theme settings (free choice).
Heading texts > uses “Primary text color” in the theme settings (free choice)
Background in a dropdown > uses “Primary background color” in the theme settings (free choice)
Text color in a dropdown > uses “Primary text color” in the theme settings (free choice)

Preview

Accordion title 1
Accordion title 2
Accordion title 3

Source code

Copy the following code and insert it into the source code of the Zendesk article to the relevant space

<table class="accordion">
  <tbody>
    <tr>
      <td>
        <h1>Accordion title 1</h1>
        <p>Accordion body</p>
      </td>
    </tr>
    <tr>
      <td>
        <h1>Accordion title 2</h1>
        <p>Accordion body</p>
      </td>
    </tr>
  </tbody>
</table>

View this video how to add and manage accordions.