Dev Tools

ImageRow

Flex row container for FigmaImage. Handles gap-aware sizing so variant widths (half, third, quarter) never overflow the content column.

Import

import ImageRow from '../../components/utility/ImageRow.astro';

Props

PropTypeRequiredDefaultDescription
continuation boolean No false Reduces top margin — use for a second row that continues the same visual group

Usage

<!-- 2 images side by side -->
<ImageRow>
  <FigmaImage id="brand-ilu-intro-1" variant="half" alt="..." />
  <FigmaImage id="brand-ilu-intro-2" variant="half" alt="..." />
</ImageRow>

<!-- 4 images in one row -->
<ImageRow>
  <FigmaImage id="brand-ilu-coloring-7" variant="quarter" alt="..." />
  <FigmaImage id="brand-ilu-coloring-8" variant="quarter" alt="..." />
  <FigmaImage id="brand-ilu-coloring-9" variant="quarter" alt="..." />
  <FigmaImage id="brand-ilu-coloring-10" variant="quarter" alt="..." />
</ImageRow>

<!-- Single image capped at half width -->
<ImageRow>
  <FigmaImage id="brand-ilu-aplication-3" variant="half" alt="..." />
</ImageRow>

Live examples

2× half

Trezor illustration 1
Trezor illustration 2

1× half (capped, not stretched)

Trezor illustration 1

4× quarter

White illustration 1
White illustration 2
White illustration 3
White illustration 4

Notes

  • Uses flex: 1 1 0 on children so the gap is absorbed proportionally — no calc() hacks needed.
  • max-width per variant ensures a single child doesn't stretch beyond its intended size.
  • Only designed to contain FigmaImage children — other content may behave unexpectedly.
Page tokens