<p>Standard text</p>
<p class="primary">Primary text - just add class <code>
<small>.primary</small>
</code></p>
<p class="secondary">Secondary text - just add class <code>
<small>.secondary</small>
</code></p>
<p class="success">Success text - just add class <code>
<small>.success</small>
</code></p>
<p class="warning">Warning text - just add class <code>
<small>.warning</small>
</code></p>
<p class="alert">Alert text - just add class <code>
<small>.alert</small>
</code></p>
<p>Standart text with <a href="#">link</a>.</p>
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
<ul>
<li>List item</li>
<li>List item
<ul>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<ol>
<li>List item</li>
<li>List item
<ul>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<dl>
<dt>Time</dt>
<dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a
whole.
</dd>
<dt>Space</dt>
<dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
</dl>
<blockquote>
Great things in business are never done by one person. They're done by a team of people.
<cite title="Source Title">Steve Jobs</cite>
</blockquote>
<table width="100%">
<thead>
<tr>
<th width="200">Table Header</th>
<th>Table Header</th>
<th width="150">Table Header</th>
<th width="150">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular Table Row</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content </td>
<td>Content </td>
</tr>
<tr class="primary">
<td>Primary Table Row</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content </td>
<td>Content </td>
</tr>
<tr class="success">
<td>Success Table Row</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content </td>
<td>Content </td>
</tr>
<tr class="warning">
<td>Warning Table Row</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content </td>
<td>Content </td>
</tr>
<tr class="alert">
<td>Alert Table Row</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content </td>
<td>Content </td>
</tr>
</tbody>
</table>
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie
magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est
bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh
porttitor.</p>
</div>
<div class="tabs-panel" id="panel3">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
craft beer twee. </p>
</div>
</div>
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
I would start in the open state, due to using the `is-active` state class.
</div>
</li>
<li class="accordion-item " data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
I would start in the open state, due to using the `is-active` state class.
</div>
</li>
</ul>
<div class="success callout" data-closable="slide-out-right">
<h5>This a friendly message.</h5>
<p>And when you're done with me, I close using a Motion UI animation.</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert callout" data-closable>
<h5>This is Important!</h5>
<p>But when you're done reading it, click the close button in the corner to dismiss this
alert.</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>