Unordered Lists
By default, using an unordered ul list won't generate an html list. This
is part of the Bulma specification. To generate you unordered list, wrap it inside a
div with the content class. Lists can also have the
is-light modifier to change the text color.
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
<div class="content">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul class="is-light">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
Ordered Lists
Ordered lists ol are also genrated using a div with the
content class. Ordered list bullets can be controlled with the
type attribute. Available types are type="1",
type="A", type="a", type="I",
type="i".
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
<div class="content">
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
Title
To create a title, you can add the title class to any html element.
Title sizes can be controlled with numbered modifiers using the patter
is-* where * represents a number between 3 and 6. Titles
can also be thinner using the is-thin, bold using the
is-bold or bolder using the is-bolder modifier classes.
This is a title
This is a huge title
This is a title
This is a big title
This is a title
This is a medium title
This is a title
This is a smaller title
This is a title
This is a huge bold title
This is a title
This is a big bold title
This is a title
This is a medium bold title
This is a title
This is a smaller bold title
This is a title
This is a huge bolder title
This is a title
This is a big bolder title
This is a title
This is a medium bolder title
This is a title
This is a smaller bolder title
This is a title
This is a huge thin title
This is a title
This is a big thin title
This is a title
This is a medium thin title
This is a title
This is a smaller thin title
<div class="columns is-multiline">
<div class="column is-3">
<h1 class="title is-3 is-narrow">This is a title</h1>
<p>This is a huge title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow">This is a title</h2>
<p>This is a big title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow">This is a title</h2>
<p>This is a medium title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow">This is a title</h2>
<p>This is a smaller title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow is-bold">This is a title</h1>
<p>This is a huge bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow is-bold">This is a title</h2>
<p>This is a big bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow is-bold">This is a title</h2>
<p>This is a medium bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow is-bold">This is a title</h2>
<p>This is a smaller bold title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow is-bolder">This is a title</h1>
<p>This is a huge bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow is-bolder">This is a title</h2>
<p>This is a big bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow is-bolder">This is a title</h2>
<p>This is a medium bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow is-bolder">This is a title</h2>
<p>This is a smaller bolder title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow is-thin">This is a title</h1>
<p>This is a huge thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow is-thin">This is a title</h2>
<p>This is a big thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow is-thin">This is a title</h2>
<p>This is a medium thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow is-thin">This is a title</h2>
<p>This is a smaller thin title</p>
</div>
</div>
Subtitle
To create a subtitle, you can add the subtitle class to any html
element. Subtitle sizes can be controlled with numbered modifiers using the patter
is-* where * represents a number between 4 and 6.
This is a title
This is a huge subtitle
This is a title
This is a big subtitle
This is a title
This is a medium subtitle
This is a title
This is a smaller subtitle
<div class="columns">
<div class="column is-3">
<h1 class="title is-3">This is a title</h1>
<p class="subtitle is-4">This is a huge subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-4">This is a title</h2>
<p class="subtitle is-4">This is a big subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-5">This is a title</h2>
<p class="subtitle is-5">This is a medium subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-6">This is a title</h2>
<p class="subtitle is-6">This is a smaller subtitle</p>
</div>
</div>
Blockquote
Huro provides blockquote html element styling. Wrap your
blockquote element inside a div with the
content class. Blockquotes can have different colors. Available color
modifier classes are is-primary, is-success,
is-info, is-warning, is-danger.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.
<div class="content">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.</p>
</blockquote>
<blockquote class="is-primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.</p>
</blockquote>
<blockquote class="is-success">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.</p>
</blockquote>
</div>
Divider
Huro provides dividers for your textual content. You can use horizontal and vertical
dividers by passing the divider text as a data-content html attribute.
See the code example for more details about usage.
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
<div class="content">
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit
est tellus sit amet turpis.</p>
<div class="is-divider" data-content="OR"></div>
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit
est tellus sit amet turpis.</p>
</div>
<div class="columns">
<div class="column">
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut
blandit est tellus sit amet turpis.</p>
</div>
<div class="is-divider-vertical" data-content="OR"></div>
<div class="column">
<p>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut
blandit est tellus sit amet turpis.</p>
</div>
</div>
Content Table
You can also use the content class to wrap an html table
element to apply minimum styles to your table UI. Please refer to the Huro
components section to find more advanced table examples and layouts.
| Heroes | Power | Availability |
|---|---|---|
| Superman | Available | |
| Batman | Unavailable | |
| Deadpool | Unavailable | |
| Spawn | Available | |
| Galactus | Unavailable |
<div class="content">
<table>
<thead>
<tr>
<th>Heroes</th>
<th>Power</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Superman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Batman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Deadpool</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Spawn</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Galactus</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
</tbody>
</table>
</div>