### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Content

### 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"`.

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. 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>