Surfaces

Des cartes graphite, des coins arrondis, aucune ombre : la profondeur vient des écarts de gris. Sections et conteneurs donnent son rythme à la page.

Cartes en filigrane

Plutôt qu'une icône dans une pastille bordée, une carte peut porter une très grande icône fine, à demi sortie de son coin. Presque invisible au repos, elle prend l'accent au survol. Pour les listes sans ordre, comme des piliers ou des fonctionnalités.

<Card watermark={<CompassIcon />} padding="lg">
  <Heading as="h3" size="md">Sobre</Heading>
  <Text>Beaucoup de noir, un seul accent, rien qui crie.</Text>
</Card>

Deux tons

Pour distinguer deux blocs parallèles, donnez à l'un le ton alt plutôt qu'une carte blanche inversée.

<Card padding="lg">…</Card>
<Card tone="alt" padding="lg">…</Card>

Cartes cliquables

Rendez la carte comme un lien avec as, et ajoutez interactive : le fond s'éclaircit légèrement au survol et l'anneau de focus s'affiche au clavier.

<Card as={Link} href="/install" interactive>
  <StepNumber n={1} />
  <Heading as="h3" size="sm">Installer</Heading>
</Card>

Sections en retrait

Avec inset, une section devient une grande carte graphite arrondie, à quelques pixels des bords de l'écran : l'effet « magazine », pour les appels à l'action et les bandeaux.

<Section inset spacing="lg">
  <Container size="narrow" style={{ textAlign: "center" }}>
    <Heading>Prêt à *commencer* ?</Heading>
    <Text size="lg">Une section en retrait : la page respire autour.</Text>
    <PillButton solid>Installer trc-ui</PillButton>
  </Container>
</Section>

Container

Centre le contenu dans une largeur maximale, avec des marges latérales qui grandissent avec l'écran (16, 24 puis 40 px).

<Container as="main">…</Container>
<Container size="narrow">…</Container>  {/* 768 px */}
<Container size="wide">…</Container>    {/* 1600 px */}