Formatting Content

• Accordions
• Tabs
• Font sizes
• Text styles
• Codes
• Quote
• Descriptions
• Lists
• Links
• Tables
• Callout blocks
• Images
• Videos
• Font Awesome

Accordions

Accordions are useful when you need to toggle between hiding and showing large amount of content:

<div class="accordion accordion--default">
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

One more accordion type:

<div class="accordion accordion--colored">
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div class="accordion__item">
    <div class="accordion__item-title">
      <strong>Accordion item</strong>
    </div>
    <div class="accordion__item-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

HTML code

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML</title>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet. </p>
 </body>
</html>

  <pre><code class="html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;HTML&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet. &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Ruby code

# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute

<pre><code class="ruby"># The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute</code></pre>

Other languages are compatible. Learn more.

Simple notes

<div class="note note--default">
  <h4 class="note-title">Default</h4>
  <p>This is a default block</p>
</div>

<div class="note note--info">
  <h4 class="note-title">Info</h4>
  <p>This is an info block</p>
</div>

<div class="note note--warning">
  <h4 class="note-title">Warning</h4>
  <p>This is a warning block</p>
</div>

<div class="note note--success">
  <h4 class="note-title">Success</h4>
  <p>This is a success block</p>
</div>

<div class="note note--danger">
  <h4 class="note-title">Danger</h4>
  <p>This is a danger block</p>
</div>

Callout block by default

<div class="callout">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a gray callout!</p>
</div>

<div class="callout callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a gray callout!</p>
</div>

Transparent callout

<div class="callout callout--transparent">
  <h4 class="callout__title">This is a transparent callout</h4>
  <p>I'm a transparent callout!</p>
</div>

With dashed border:

<div class="callout callout--transparent callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a transparent callout!</p>
</div>

Success callout

<div class="callout callout--success">
  <h4 class="callout__title">This is a success callout</h4>
  <p>I'm a success callout!</p>
</div>

<div class="callout callout--success callout--dashed">
  <h4 class="callout__title">This is a success callout</h4>
  <p>I'm a success callout!</p>
</div>

Info callout

<div class="callout callout--info">
  <h4 class="callout__title">This is an info callout</h4>
  <p>I'm a neutral info callout!</p>
</div>

<div class="callout callout--info callout--dashed">
  <h4 class="callout__title">This is an info callout</h4>
  <p>I'm a neutral info callout!</p>
</div>

Warning-callout

<div class="callout callout--warning">
  <h4 class="callout__title">This is a warning callout</h4>
  <p>And now I'm going to tell you something very important! Pay attention to me!</p>
</div>

<div class="callout callout--warning callout--dashed">
  <h4 class="callout__title">This is a warning callout</h4>
  <p>I'm a warning callout with dashed border!</p>
</div>

Caution callout

<div class="callout callout--danger">
  <h4 class="callout__title">This is a caution callout</h4>
  <p>And here there's some critical information you have to know!</p>
</div>

<div class="callout callout--danger callout--dashed">
  <h4 class="callout__title">This is a caution callout</h4>
  <p>I'm a caution callout with dashed border!</p>
</div>

Callout in primary color

<div class="callout callout--primary">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a callout in primary color</p>
</div>

<div class="callout callout--primary callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a callout in primary color with dashed border!</p>
</div>

Callout blocks with the Font Awesome icons

It is possible to combine your callouts with Font Awesome icons:

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-paper-plane">&nbsp;</em> Subscribe icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-lock">&nbsp;</em> Lock icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-phone">&nbsp;</em> Phone icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-clock">&nbsp;</em> Clock icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-file">&nbsp;</em> File icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="far fa-smile">&nbsp;</em> Smile icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-magic">&nbsp;</em> Magic icon</h4>
  <p>This is callout with the icon</p>
</div>

Combine colors and icons!

<div class="callout callout--success">
  <h4 class="callout__title"><em class="far fa-smile-o">&nbsp;</em> Smile icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout callout--warning">
  <h4 class="callout__title"><em class="fas fa-magic">&nbsp;</em> Magic icon</h4>
  <p>This is callout with the icon</p>
</div>

Default description list

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Horizontal description list

Description lists

Such description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

Font Awesome is a variety of scalable vector icons that can instantly be customized — size, color, shadow, and other changes that can be done with the power of CSS.

Font Awesome inside the text

It is rather easy to insert a Font Awesome icon to any text of your Help Center  . Font Awesome is completely free for commercial use  . The icons are vector, which means they're gorgeous on high-resolution displays  . It is very easy to make your own design by changing icons' color, size, shadow, and anything that's possible with CSS  .

<p>It is rather simple to insert a Font Awesome icon to any text of your Help Center <em class="fas fa-flag">&nbsp;</em>. Font Awesome is completely 
free for commercial use <em class="fas fa-hand-left">&nbsp;</em>. The icons are vector, which means they're gorgeous on high-resolution displays <em class="fas fa-eye">&nbsp;</em>. 
It is very easy to make your own design by changing icons' color, size, shadow, and anything that's possible with CSS <em class="fas fa-pencil-alt">&nbsp;</em>.
</p>

<em class="fas fa-pencil"> </em>

<em class="fas fa-pencil">&nbsp;</em>

Font Awesome titles

You can use any icons from Font Awesome library for making your titles more stylish and memorable!

  Title with a motorcycle

  Title with a calculator

  Title with binoculars

  Title with a heartbeat

<h4><em class="fas fa-2x fa-motorcycle">&nbsp;</em> Title with a motorcycle</h4>
<h4 class="wysiwyg-color-green120"><em class="fas fa-2x fa-calculator">&nbsp;</em> Title a the calculator</h4>
<h4 class="wysiwyg-color-pink"><em class="fas fa-2x fa-binoculars">&nbsp;</em> Title with binoculars</h4>
<h4 class="wysiwyg-color-red"><em class="fas fa-2x fa-heartbeat">&nbsp;</em> Title with a heartbeat</h4>

And not only your titles:

Tomorrow we will run faster, stretch out our arms further... And then one fine morning So we beat on, boats against the current, borne back ceaselessly into the past.

<div class="fas fa-quote-left fa-3x fa-pull-left fa-border">&nbsp;</div>
<p>Tomorrow we will run faster, stretch out our arms further... And then one fine morning So we beat on, boats against the current, borne back ceaselessly into the past.</p>

Animate them!

<div class="fas fa-spinner fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-circle-notch fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-sync fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-cog fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-venus fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fas fa-mars fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-firefox fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-opera fa-spin fa-3x fa-fw">&nbsp;</div>
<div class="fab fa-chrome fa-spin fa-3x fa-fw">&nbsp;</div>

And mix them:

<div style="text-align: center;">
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fab fa-twitter fa-stack-1x">&nbsp;</div>
    </div>
    <p>fa-twitter and fa-square</p>
  </div>
  <div style="display: inline-block; margin-right: 20px;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-circle fa-stack-2x">&nbsp;</div>
      <div class="fas fa-flag fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-flag and fa-circle</p>
  </div>
  <div style="display: inline-block;">
    <div class="fa-stack fa-lg">
      <div class="fas fa-square fa-stack-2x">&nbsp;</div>
      <div class="fas fa-terminal fa-stack-1x fa-inverse">&nbsp;</div>
    </div>
    <p>fa-terminal and fa-square</p>
  </div>
</div>

You can use a built-in WYSIWYG editor to change the font size:

Or you can change the source code:

This is a Zendesk huge size or Header 2

<p><span class="wysiwyg-font-size-x-large">This is a Zendesk huge size or Header 2 </span></p>

<h2>This is a header 2</h2>

This is a Zendesk large size or Header 3

<p><span class="wysiwyg-font-size-large">This is a Zendesk large size or Header 3</span></p>

<h3>This is a header 3</h3>

This is a Zendesk medium size or Header 4

<p><span class="wysiwyg-font-size-medium">This is a Zendesk medium size or Header 4</span></p>

<h4>This is a header 4</h4>

This is a header 5

<h5>This is a header 5</h5>

Small size

<p><span class="wysiwyg-font-size-small">Small size</span></p>

This is normal text. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasize design elements over content. It's also called placeholder (or filler) text.

<p>This is normal text. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasize design elements over content. It's also called placeholder (or filler) text.</p>

Image by default

<p>
  <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Image with a rounded border

<p>
  <img class="image-with-border" src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Image with shadow

<p>
  <img class="image-with-shadow" src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Image with overlay

<p class="image-overlay">
  <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" />
</p>

Image Lightbox

It's possible to open a larger version of the image in the lightbox:

<p>
  <a class="image-with-lightbox" href="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/image.jpg" width="400" />
  </a>
</p>

Link by default

This is a simple link. Click me!

<a href="https://www.lotusthemes.com/" target="_blank">
  This is a simple link. Click me!
</a>

Button link

Click me too!

<a class="btn btn--primary" href="https://www.lotusthemes.com" target="_blank">
  Click me too!
</a>

Bullet/unordered list

• bullet list one
• bullet list two
• bullet list three
• bullet list four
  • enclosed element one
  • enclosed element two

<ul>
  <li>bullet list one</li>
  <li>bullet list two</li>
  <li>bullet list three</li>
  <li>bullet list four
    <ul>
      <li>enclosed element one</li>
      <li>enclosed element two</li>
    </ul>
  </li>
</ul>

Bullet colored list

• bullet list one
• bullet list two
• bullet list three
• bullet list four

<ul class="list-bullet">
  <li>bullet list one</li>
  <li>bullet list two</li>
  <li>bullet list three</li>
  <li>bullet list four</li>
</ul>

Ordered list

1. bullet list one
2. bullet list two
3. bullet list three
4. bullet list four
   1. enclosed element one
   2. enclosed element two

<ol>
  <li>bullet list one</li>
  <li>bullet list two</li>
  <li>bullet list three</li>
  <li>bullet list four
    <ol>
      <li>enclosed element one</li>
      <li>enclosed element two</li>
    </ol>
  </li>
</ol>

Ordered list with colored numbers

For longer, step-by-step instructions and descriptions, this type of list is a great way to display content.

1. Mix flour, cinnamon, salt and starch in a bowl.
2. Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
3. Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.
4. Peel the apples and cut them into small cubes.
5. Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.
   1. Mix flour, cinnamon, salt and starch in a bowl.
   2. Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
   3. Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.
   4. Peel the apples and cut them into small cubes.
   5. Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.

<ol class="list-colored">
  <li>Mix flour, cinnamon, salt and starch in a bowl.</li>
  <li>Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.</li>
  <li>Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.</li>
  <li>Peel the apples and cut them into small cubes.</li>
  <li>Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.
    <ol class="list-colored">
      <li>Mix flour, cinnamon, salt and starch in a bowl.</li>
      <li>Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.</li>
      <li>Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.</li>
      <li>Peel the apples and cut them into small cubes.</li>
      <li>Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.</li>
    </ol>
  </li>
</ol>

Generic Table

<table class="table">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Color Header:

<table class="table table--color-header">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Bordered table

<table class="table table--bordered">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Striped table

<table class="table table--striped">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Hover-color table

<table class="table table--hover">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Tabs are perfect for displaying different subjects in your article!

Tabs style by default:

<div class="tabs">
  <div class="tabs-menu">
    <span class="tabs-link is-active">Tab 1</span>
    <span class="tabs-link">Tab 2</span>
  </div>
  <div class="tab">Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</div>
  <div class="tab is-hidden">Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.</div>
</div>

Colored style:

<div class="tabs tabs--colored-1">
  <div class="tabs-menu"><span class="tabs-link is-active">Tab 1</span>
    <span class="tabs-link">Tab 2</span>
    <span class="tabs-link">Tab 3</span>
  </div>
  <div class="tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="tab is-hidden">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
  <div class="tab is-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tabs tabs--colored-2">
  <div class="tabs-menu"><span class="tabs-link is-active">Tab 1</span>
    <span class="tabs-link">Tab 2</span>
    <span class="tabs-link">Tab 3</span>
    <span class="tabs-link">Tab 4</span>
  </div>
  <div class="tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="tab is-hidden">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
  <div class="tab is-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="tab is-hidden">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>

You can use a built-in WYSIWYG editor to change the text style:

Or you can change the source code:

This is italic font-style

<p><em>This is italic font-style</em></p>

This is bold font-style

<p><strong>This is bold font-style</strong></p>

This is your underlined text

<p><span class="wysiwyg-underline">This is your underlined text</span></p>

This text is deleted

<p>This text is <del>deleted</del></p>

This is an important marked text

<p>This is <span class="text-primary">an important marked text</span></p>

This is an important blue text

<p>This is <span class="text-info">an important blue text</span></p>

This is an important yellow text

<p>This is <span class="text-warning">an important yellow text</span></p>

This is an important red text

<p>This is <span class="text-danger">an important red text</span></p>

Quote by default

"Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"

<blockquote>
  "Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"
</blockquote>

Colored quote

"Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"

<blockquote class="is-colored">
  "Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"
</blockquote>

Embedded video

<div class="embed">
  <iframe src="https://player.vimeo.com/video/206627186?badge=0" width="640" height="274" frameborder="0" allowfullscreen=""></iframe>
</div>

Video in a lightbox:

<p>
  <a class="image-with-video-icon" href="https://www.youtube.com/watch?v=KtsAGqo-V18">
    <img src="https://s3-us-west-2.amazonaws.com/lotusthemes/video.png" /> </a>
</p>