Card

With card you can organize information in a box with, optionally, an header and a footer. Here some examples and combinations. Note that you can use the align-right class to align elements at right and the group class to add margin between buttons

<div class="card">
  <div class="card-header">
    <span class="icon">🍩</span>Some title
  </div>
  <div class="card-body">
    <div class="content">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste odit ratione mollitia illo dicta quas
      exercitationem consectetur excepturi minima eveniet hic laborum sapiente voluptates, eos quibusdam,
      aspernatur ipsam nisi a!
    </div>
  </div>
  <div class="card-footer">
    <div class="group align-right">
      <button class="button">Button</button>
      <button class="button is-success">Button</button>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <div class="content">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste odit ratione mollitia illo dicta quas
      exercitationem consectetur excepturi minima eveniet hic laborum sapiente voluptates, eos quibusdam,
      aspernatur ipsam nisi a!
    </div>
  </div>
  <div class="card-footer">
    <div class="group align-right">
      <button class="button">Button</button>
      <button class="button is-success">Button</button>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">
    Some title
  </div>
  <div class="card-body">
    <div class="content">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste odit ratione mollitia illo dicta quas
      exercitationem consectetur excepturi minima eveniet hic laborum sapiente voluptates, eos quibusdam,
      aspernatur ipsam nisi a!
    </div>
  </div>
</div>