📮 Orquestra-Mail

Componentes

Alert

<div class="mail-alert">
  Alert content!
</div>

Variantes

• -blue
• -green
• -red
• -yellow

<div class="mail-alert -blue">
  Alert content!
</div>

Chip

<div class="mail-chip">Hello</div>

Tag

<div class="mail-tag">Tag</div>

Variantes

• -blue
• -green
• -red
• -yellow
• -nowrap

Layout

Grid

mail-col-1 (100%)

┌──────────────────────────────────────────────────────────────────┐
│                           .mail-col-1                            │
└──────────────────────────────────────────────────────────────────┘

mail-col-1-2 (50%)

┌────────────────────────────────┐┌────────────────────────────────┐
│          .mail-col-1-2         ││          .mail-col-1-2         │
└────────────────────────────────┘└────────────────────────────────┘

mail-col-1-3 (33%)

┌─────────────────────┐┌─────────────────────┐┌─────────────────────┐
│    .mail-col-1-3    ││    .mail-col-1-3    ││    .mail-col-1-3    │
└─────────────────────┘└─────────────────────┘└─────────────────────┘

mail-col-1-4 (25%)

┌───────────────┐┌───────────────┐┌───────────────┐┌───────────────┐
│ .mail-col-1-4 ││ .mail-col-1-4 ││ .mail-col-1-4 ││ .mail-col-1-4 │
└───────────────┘└───────────────┘└───────────────┘└───────────────┘

mail-col-2-3 (66%)

┌────────────────────────────────────────────┐┌─────────────────────┐
│               .mail-col-2-3                ││    .mail-col-1-3    │
└────────────────────────────────────────────┘└─────────────────────┘

Tables

<table class="mail-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

Variantes

• -zebra

<table class="mail-table -zebra">
  ...
</table>

Forms

TODO

Utility

TODO