Skip to content Skip to footer navigation
Light theme Dark theme

Width Fieldtype

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!

Screenshot of Width
The Width Fieldtype in action!

Overview#

An alternative to the Button Group or Select field types that is a bit more compact and visually appealing.

Data structure#

The selected value is stored as an integer.

image_width: 50
yaml
yaml

Templating#

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

<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>
antlers
antlers

Options#

options #

array

The array of integers presented in the blueprint. Default: 25 / 33 / 50 / 66 / 75 / 100

default #

integer

The default selected width. Can be set to a value that doesn't exist in the options array if desired.