ContentPreview - Trezor Design

Import

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

Props

Prop	Type	Default	Description
`size`	`'full' \| 'half' \| 'third' \| 'quarter'`	`'half'`	Controls inner padding and minimum height. Match the parent Columns `count`.
`contentType`	`'text' \| 'svg' \| 'img'`	`'text'`	Content mode. `text`/`svg` use padding and flex-center. `img` fills edge-to-edge with `object-fit: cover`.
`heading`	`string`	—	Optional label above the box, left-aligned. Rendered as `body-xl`.
`description`	`string`	—	Optional caption below the box, centered. Rendered as `body-sm` secondary.

Size reference

Size	Columns match	Min-height	Padding
`full`	`count={1}`	360px	96px
`half`	`count={2}`	360px	64px
`third`	`count={3}`	280px	48px
`quarter`	`count={4}`	200px	24px

  contentType="img" always uses 0 padding regardless of size. Min-height still applies so the image has a height to cover.

  Usage — text
 <Columns count={2}>
  <ContentPreview size="half" contentType="text" heading="Vision">
    <h2 class="headline-md">Uncompromising self-custody for everyone.</h2>
  </ContentPreview>
  <ContentPreview size="half" contentType="text" heading="Mission">
    <h2 class="headline-md">Own your keys. Own your future.</h2>
    <p class="body-md">Everything we build serves this principle.</p>
  </ContentPreview>
</Columns>
 
In text mode, all slotted children are wrapped in a centered flex-column container with a 12px gap. Any combination of headline + body works — just drop elements inside.
 
  Live examples — text
   full — tagline (display text)
         Take Control
  
 
  
    
  
 
  half — brand values with heading
     Independence
    Headline
  
 
  
    Trust
    Trustless by Design
 Open source, audited, nothing to hide.
  
 
  
    
  
 
  third — short statements
         Privacy first
  
 
  
        Open source
  
 
  
        Built to last
  
 
  
    
  
 
  quarter — compact labels
         Secure
  
 
  
        Private
  
 
  
        Open
  
 
  
        Durable
  
 
  
    
  
 
 
 
  Live examples — SVG
   third — inline SVG logo mark
          
 Primary mark
 
           
 Logo mark on brand fill
 
         
 Icon from iconset
 
    
  
 
 
 
  Live examples — img (fill)
 
Pass a native <img>, <picture>, or <FigmaImage> — it fills the box edge-to-edge with object-fit: cover. Demos below use colored <div> stand-ins to visualize the fill.
   half — moodboard tiles
        
  
  
       
  
  
    
  
 
  quarter grid — dense moodboard
        
  
  
       
  
  
       
  
  
       
  
  
    
  
 
 
 
  Notes
  Always place inside <Columns count={N}> — match size to count. The 16px gap between items is handled by Columns.
 Card uses outline (not border) so the stroke sits outside the padded content area.
 Box grows past min-height if content needs more space — padding stays on all sides.
 In img mode, overflow: hidden clips the image to the 16px radius. Padding is always 0 in this mode.
 SVGs auto-scale via max-width / max-height: 100% so large marks never overflow the padded area.
 No hover state — this is a showcase element, not interactive.