Skip to main content
Smoke Test 1776465080860
SVEN

Block variants & layout

Simple Blocks

Demonstrates all block types, variants and layout options.

1 (0.25rem)2 (0.5rem)4 (1rem — default)8 (2rem)12 (4rem)16 (6rem)
solid (default)
dashed
dotted
subtle
Primary ButtonAccent ButtonOutline ButtonInternal LinkExternal Link (auto rel/target)
default (bullet list)
  • First item
  • Second item
  • Third item
minimal (clean, no markers)
  • First item
  • Second item
  • Third item
ordered (numbered)
  1. Step one
  2. Step two
  3. Step three
ordered via layout variant
  1. Step one
  2. Step two
  3. Step three
textSize: 1 (base), gap: 1 (tight)
  • Small and tight
  • Compact list
  • Minimal space
textSize: 5 (3xl), gap: 5 (loose)
  • Large and airy
  • Generous spacing
  • Open layout
columns: 2, left-aligned
  • Column one
  • Column two
  • Column three
  • Column four
  • Column five
  • Column six
paragraph textSize: 1 → 5

textSize 1 (base)

textSize 2 (lg)

textSize 3 (xl)

textSize 4 (2xl)

textSize 5 (3xl)

paragraph align: left / center / right

Left-aligned text

Center-aligned text

Right-aligned text

quote textSize: 2 (lg)

"A small quote with textSize 2"

Demo
single (one image)
Illustration image
A single image with caption
side-by-side (two images next to each other)
Image 1
First image
Image 2
Second image
stacked (two images stacked)
Image 1
Image 2