Dev Tools

Perex

Large emphasized text block for key brand messages. Headline-sm size, primary color, text constrained to 50% of the content container.

Import

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

Props

No props. Content is passed via the default slot.

Usage

<!-- Single perex -->
<Perex>
  <p>Security is not a feature — it is the foundation everything else is built on.</p>
</Perex>

<!-- Multi-paragraph perex -->
<Perex>
  <p>We believe in radical transparency.</p>
  <p>Open source isn't a marketing decision — it's a commitment to the people who trust us with their assets.</p>
</Perex>

Live examples

Single perex

Security is not a feature — it is the foundation everything else is built on.

Multi-paragraph perex

We believe in radical transparency.

Open source isn't a marketing decision — it's a commitment to the people who trust us with their assets.

Notes

  • Uses headline-sm for visual emphasis — larger than TextSection's body-lg (18px).
  • Text color is --color-content-primary — the darkest content token.
  • Text constrained to 50% of the content container via --layout-text-half-width.
  • In content-flow, Perex is a block-level element — it gets 64px margin-top (--content-flow-block), or 16px when immediately following a heading.
  • No heading, no props — purely a slot wrapper. If you need a heading, use TextSection instead.
Page tokens