Preview

Typography asset

Use Heading and Text as standalone starter-kit primitives.

Type Scale defines the page, section, and card rhythm for all starter-kit assets.

Included patterns

• Page headings

• Section headings

• Supporting body copy

Page rhythm

Heading level 1 + Text for primary page framing.

Section rhythm

Heading level 2 + Text for grouped sections.

Card rhythm

Heading level 3 + Text for compact assets.

Variants

Page rhythm

Heading/Text pairings for page-level structure.

Card rhythm

Heading/Text pairings for card and section modules.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Typography asset</Badge>
    <Heading level={1}>Use Heading and Text as standalone starter-kit primitives.</Heading>
    <Text as="p">Type Scale defines the page, section, and card rhythm for all starter-kit assets.</Text>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Page headings</Text>
        <Text as="p">• Section headings</Text>
        <Text as="p">• Supporting body copy</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Page rhythm</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Heading level 1 + Text for primary page framing.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Section rhythm</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Heading level 2 + Text for grouped sections.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Card rhythm</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Heading level 3 + Text for compact assets.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open component docs</Button>
        <Button variant="outline">Use in auth layout</Button>
    </Stack>
  </Stack>
</Container>