Theme
← Blocks
Marketing Block family Sales, support, and company pages

Contact Sections

Add support, sales, and outreach sections with cleaner routing and expectation-setting.

Preview

Open in new tab
Contact blocks

Route conversations to the right team before the form gets filled.

Contact sections package sales, support, and company routing instead of a single generic form block.

Sales contact

Qualification-first contact module.

Support split

Separate help center, ticketing, and account support.

Office hours

Smaller contact cards for company pages.

Designed for
Sales-assisted motions, support routing, and enterprise contact pages.

Variants

Sales contact

Form plus qualification copy for pipeline capture.

Support split

Routes support, docs, and account help.

Office hours

Contact cards for company and hiring 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}>Route conversations to the right team before the form gets filled.</Heading>
    <Text as="p">Contact sections package sales, support, and company routing instead of a single generic form block.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open contact sections</Button>
        <Button variant="outline">See about page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Sales contact</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Qualification-first contact module.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Support split</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Separate help center, ticketing, and account support.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Office hours</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Smaller contact cards for company pages.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>Sales-assisted motions, support routing, and enterprise contact pages.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
  </Stack>
</Container>