Dev Tools

TextSection

Prose block with optional heading, body, and button. Two variants: default (50% width, used inline on doc pages) and card (fill width, vertically centered, used inside Columns or as a standalone card).

Import

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

Props

PropTypeRequiredDefaultDescription
heading string No — Optional heading text displayed above the body
headingLevel 'h2' | 'h3' | 'h4' No 'h3' Semantic heading level — visual styling stays the same regardless
variant 'default' | 'card' No 'default' Card mode fills width, centers vertically, adds 40px padding and 360px min-height

Slots

SlotDescription
default Body content. Pass <p>, <ul>, or any HTML.
button Optional CTA. Pass a Button from the design system.

Internal spacing

  • Heading → body: 8px
  • Body → button: 16px
  • Heading → button (no body): 16px

Usage

<!-- Heading + body (most common) -->
<TextSection heading="Section title">
  <p>Body text explaining the section content.</p>
</TextSection>

<!-- Body + button -->
<TextSection>
  <p>Standalone description with a CTA below.</p>
  <Button slot="button" client:only="react" label="Learn more" intent="brand" priority="secondary" />
</TextSection>

<!-- Heading + body + button -->
<TextSection heading="Section title">
  <p>Body text.</p>
  <Button slot="button" client:only="react" label="Read docs" intent="brand" />
</TextSection>

<!-- Card variant inside Columns -->
<Columns count={2}>
  <TextSection variant="card" heading="Card title">
    <p>Fills the column, vertically centered, 40px padding.</p>
    <Button slot="button" client:only="react" label="Action" intent="brand" />
  </TextSection>
  <TextSection variant="card" heading="Second card">
    <p>Another card in the same row — heights match.</p>
  </TextSection>
</Columns>

Live examples — default variant

Heading + body

Visual language

Our visual language reflects how we think about security — clear, precise, and purposeful. Every element serves a function.

Body only

Trezor photography captures real moments of interaction between people and their devices. Authenticity over staging.

Body + button

Read the full design principles to understand how we approach color, typography, and motion across the product surface.

Heading + body + button

Get started

Install the Suite app and pair your Trezor in under five minutes. The setup wizard walks through every step.

Heading + button (no body)

Ready to ship?

Live examples — card variant

Two cards in Columns count={2}

Self-custody

Hold your own keys. No third party between you and your assets — ever.

Open source

Every line of firmware is public. Review it, build it, run it — verification by anyone, anytime.

Three cards in Columns count={3}

Secure

Hardware isolation keeps keys offline and out of reach.

Simple

Set up in minutes. Send and receive with a few clicks.

Sovereign

Your keys, your rules. No accounts, no permissions, no gatekeepers.

Notes

  • Default variant: heading and body constrained to 50% of the content container via --layout-text-half-width.
  • Card variant: fills width, vertically centered, padding 40px, min-height: var(--layout-card-min-height) (360px).
  • In content-flow, TextSection is a block-level element — 64px margin-top, or 16px when immediately following a heading.
  • The card wrapper itself is a separate concern — typically wrap multiple cards in <Columns count={N}> for side-by-side layout.
  • Heading renders as body-xl-strong (24px demibold) regardless of semantic level.
  • Button slot accepts the design system Button component — pass client:only="react" since it's a React island.
Page tokens