# section — Examples

## Basic usage

```html
<card-ui>
  <header-ui>
    <text-ui variant="title">Settings</text-ui>
  </header-ui>
  <section-ui>
    <col-ui gap="md">
      <field-ui label="Name">
        <input-ui name="name"></input-ui>
      </field-ui>
      <field-ui label="Email">
        <input-ui name="email" type="email"></input-ui>
      </field-ui>
    </col-ui>
  </section-ui>
</card-ui>
```

## Bleed

```html
<card-ui>
  <header-ui>
    <text-ui variant="title">Cover image</text-ui>
  </header-ui>
  <section-ui bleed>
    <img src="cover.jpg" style="width: 100%; display: block;">
  </section-ui>
  <section-ui>
    <text-ui>Caption text inside a normal padded section.</text-ui>
  </section-ui>
</card-ui>
```
