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

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>
<div class="header-block">
    <img class="w-[{{ $image_width }}px] src="/assets/mycoolicon.png>
    <h1>Icon overview</h1>
</div>

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.