# Empty
Lorem...

### Simples

<div class="docs-components">
  <div class="o-empty">
    <h1 class="o-empty-title">Nenhum período informado</h1>
    <p class="o-empty-message">
      Para visualizar os dados pesquise por um período de
      levantamento e clique no botão <strong>Pesquisar</strong>.
    </p>
  </div>
</div>

```html
<div class="o-empty">
  <h1 class="o-empty-title">Nenhum período informado</h1>
  <p class="o-empty-message">
    Para visualizar os dados pesquise por um período de
    levantamento e clique no botão <strong>Pesquisar</strong>.
  </p>
</div>
```

### Ícones

<div class="docs-components">
  <div class="o-empty">
    <div class="o-empty-icon">
      <i class="far fa-calendar-alt"></i>
    </div>
    <h1 class="o-empty-title">Nenhum período informado</h1>
    <p class="o-empty-message">
      Para visualizar os dados pesquise por um período de
      levantamento e clique no botão <strong>Pesquisar</strong>.
    </p>
  </div>
</div>

```html
<div class="o-empty">
  <div class="o-empty-icon">
    <i class="far fa-calendar-alt"></i>
  </div>
  <h1 class="o-empty-title">Nenhum período informado</h1>
  <p class="o-empty-message">
    Para visualizar os dados pesquise por um período de
    levantamento e clique no botão <strong>Pesquisar</strong>.
  </p>
</div>
```

### Boxed

<div class="docs-components">
  <div class="o-empty">
    <div class="o-empty-icon -boxed">
      <i class="fas fa-calendar"></i>
    </div>
    <h1 class="o-empty-title">Nenhum período informado</h1>
    <p class="o-empty-message">
      Para visualizar os dados pesquise por um período de
      levantamento e clique no botão <strong>Pesquisar</strong>.
    </p>
  </div>
</div>

```html
<div class="o-empty">
  <div class="o-empty-icon -boxed">
    <i class="fas fa-calendar"></i>
  </div>
  <h1 class="o-empty-title">Nenhum período informado</h1>
  <p class="o-empty-message">
    Para visualizar os dados pesquise por um período de
    levantamento e clique no botão <strong>Pesquisar</strong>.
  </p>
</div>
```

### Call to action

<div class="docs-components">
  <div class="o-empty">
    <div class="o-empty-icon -boxed">
      <i class="fas fa-calendar"></i>
    </div>
    <h1 class="o-empty-title">Nenhum período informado</h1>
    <p class="o-empty-message">
      Para visualizar os dados pesquise por um período de
      levantamento e clique no botão <strong>Pesquisar</strong>.
    </p>
    <div class="o-empty-cta">
      <button class="btn btn-primary">Pesquisar</button>
      <button class="btn btn-link">Cancelar</button>
    </div>
  </div>
</div>

```html
<div class="o-empty">
  <div class="o-empty-icon -boxed">
    <i class="fas fa-calendar"></i>
  </div>
  <h1 class="o-empty-title">Nenhum período informado</h1>
  <p class="o-empty-message">
    Para visualizar os dados pesquise por um período de
    levantamento e clique no botão <strong>Pesquisar</strong>.
  </p>
  <div class="o-empty-cta">
    <button class="btn btn-primary">Pesquisar</button>
    <button class="btn btn-link">Cancelar</button>
  </div>
</div>
```

<style lang="scss">
@import '../../src/styles/docs.scss'
</style>