Theme
← Blocks
Marketing Block family About pages, hiring surfaces, and investor-facing pages

Team Sections

Publish founder, leadership, and team rosters with designed identity cards.

Preview

Open in new tab
People blocks

Use team sections that feel like part of the brand, not a CMS dump.

Team blocks ship consistent hierarchy for names, roles, bios, and supporting metadata.

Leadership grid

Focused identity cards with enough space for a point of view.

Editorial bios

Longer narrative layout for founders and operators.

Compact team list

Condensed roster for larger teams.

Variants

Leadership grid

Card-based roster for executives and founders.

Editorial bios

Longer bios for company storytelling.

Compact team list

Dense roster for hiring or event pages.

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">Marketing</Badge>
    <Heading level={1}>Use team sections that feel like part of the brand, not a CMS dump.</Heading>
    <Text as="p">Team blocks ship consistent hierarchy for names, roles, bios, and supporting metadata.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open team blocks</Button>
        <Button variant="outline">See about page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Leadership grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Focused identity cards with enough space for a point of view.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial bios</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Longer narrative layout for founders and operators.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Compact team list</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Condensed roster for larger teams.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>