# Width

A slick way to select a width in your blueprints. Although you could use it for anything you want as it stores the value in your markdown as an integer. Neat!

## Overview

An alternative to the [Button Group](/fieldtypes/button_group.md) or [Select](/fieldtypes/select.md) fieldtypes that is a bit more compact and visually appealing.

## Data structure

The selected value is stored as an integer.

``` yaml
image_width: 50
```

## Templating

Use in your front end, most likely with a CSS framework like Tailwind or Bootstrap to set custom widths.

::tabs

::tab antlers

```antlers
<div class="col-12"">
    <div class="w-25">
        <h1>Compact headings</h1>
    </div>
    <div class="w-{{ image_width }}">
        <h2>With wider sub-headings</h2>
    </div>
</div>
```

::tab blade

```blade
<div class="header-block">
	<img class="w-[{{ $image_width }}px] src="/assets/mycoolicon.png>
    <h1>Icon overview</h1>
</div>
```
::