Preview

Open in new tab

About page pack

Tell the company story with a page that is already structured.

The about page example combines content, team, logo clouds, and contact routing into a finished page.

Company narrative

Longer-form copy with supporting proof points.

Team roster

Leadership or company roster cards with role detail.

Contact lane

Routes press, partnerships, and hiring interest.

Built from: Content, team, logo cloud, stat, and contact sections.

Use this page example as the base for company, hiring, or partnership surfaces.

Variants

Story-led company page

Narrative company page with team and values.

Proof-led company page

About page that leans on traction and customer trust.

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, Grid, Heading, Separator, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">About page pack</Badge>
    <Heading level={1}>Tell the company story with a page that is already structured.</Heading>
    <Text as="p">The about page example combines content, team, logo clouds, and contact routing into a finished page.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open about page</Button>
        <Button variant="outline">Use team sections</Button>
    </Stack>
    <Separator />
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Company narrative</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Longer-form copy with supporting proof points.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Team roster</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Leadership or company roster cards with role detail.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Contact lane</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Routes press, partnerships, and hiring interest.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Content, team, logo cloud, stat, and contact sections.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Card.Root>
      <Card.Content>
        <Text as="p">Use this page example as the base for company, hiring, or partnership surfaces.</Text>
      </Card.Content>
    </Card.Root>
  </Stack>
</Container>

DRYui

About Page Example