<button class="button">Normal</button>
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-white">White</button>
<button class="button is-black">Black</button>

<button class="button is-small is-primary">Small</button>
<button class="button is-primary">Normal</button>
<button class="button is-medium is-primary">Medium</button>
<button class="button is-large is-primary">Large</button>

<button class="button is-outlined">Outlined</button>
<button class="button is-outlined is-primary">Primary outlined</button>
<button class="button is-outlined is-danger">Danger outlined</button>
<button class="button is-outlined is-dark">Dark outlined</button>

<button class="button is-inverted is-primary">Primary inverted</button>
<button class="button is-inverted is-link">Link inverted</button>
<button class="button is-inverted is-info">Info inverted</button>
<button class="button is-inverted is-danger">Danger inverted</button>
<button class="button is-inverted is-light">Light inverted</button>

<button class="button is-rounded">Rounded</button>
<button class="button is-rounded is-primary">Primary rounded</button>
<button class="button is-rounded is-success">Success rounded</button>
<button class="button is-rounded is-danger is-large">Large rounded danger</button>

<button class="button is-primary is-fullwidth">Fullwidth button</button>
<button class="button is-outlined is-fullwidth">Fullwidth outlined</button>

<button class="button is-loading">Loading</button>
<button class="button is-primary is-loading">Primary loading</button>
<button class="button is-success is-loading is-medium">Medium loading</button>

<button class="button" disabled>Disabled</button>
<button class="button is-primary is-disabled">Disabled primary</button>
<button class="button is-outlined is-danger" disabled>Disabled outlined</button>

<button class="button is-text">Text button</button>
<button class="button is-text is-primary">Primary text</button>
<button class="button is-text is-danger">Danger text</button>

<div class="box">This is content inside a box with shadow and borders.</div>

<div class="content">
  <h1>Heading h1</h1>
  <p>Example paragraph. <strong>Bold text</strong> and <em>italic</em>.</p>
  <ul><li>List item 1</li><li>List item 2</li></ul>
  <blockquote>This is a blockquote.</blockquote>
</div>
<div class="content is-small">Small content</div>
<div class="content is-large">Large content</div>

<div class="delete"></div>
<div class="delete is-small"></div>
<div class="delete is-medium"></div>
<div class="delete is-large"></div>

<span class="icon"><svg ...>...</svg></span>
<span class="icon is-small">🔍</span>
<span class="icon is-medium">⭐</span>
<span class="icon is-large">❤️</span>

<figure class="image is-64x64">
  <img src="..." alt="64x64">
</figure>
<figure class="image is-128x128">
  <img src="..." alt="128x128">
</figure>

<div class="notification">Default notification</div>
<div class="notification is-primary">Primary notification</div>
<div class="notification is-info">Info notification</div>
<div class="notification is-success">Success notification</div>
<div class="notification is-warning">Warning notification</div>
<div class="notification is-danger">Danger notification</div>

<progress class="progress is-primary" value="45" max="100">45%</progress>
<progress class="progress is-link" value="55" max="100">55%</progress>
<progress class="progress is-info" value="65" max="100">65%</progress>
<progress class="progress is-success" value="75" max="100">75%</progress>
<progress class="progress is-warning" value="85" max="100">85%</progress>
<progress class="progress is-danger" value="95" max="100">95%</progress>

<span class="tag is-primary">Primary</span>
<span class="tag is-primary is-light">Primary light</span>
<span class="tag is-primary is-small">Small</span>
<span class="tag is-info">Tag <button class="delete is-small"></button></span>
<div class="tags">
  <span class="tag">One</span>
  <span class="tag is-primary">Two</span>
</div>

<div class="table-container">
  <table class="table is-striped is-hoverable is-bordered is-fullwidth">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ana</td>
        <td>25</td>
        <td>Madrid</td>
      </tr>
      <tr class="is-primary">
        <td>Primary row</td>
        <td>30</td>
        <td>Barcelona</td>
      </tr>
    </tbody>
  </table>
</div>

<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>

<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
<h3 class="subtitle is-3">Subtitle 3</h3>
<h4 class="subtitle is-4">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>