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!

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.
Docs Feedback
Submit improvements, related content, or suggestions through Github.
Betterify this page