Preview

Open in new tab

FAQ blocks

Answer the buyer questions before support gets the ticket.

FAQ sections include routing, supporting actions, and multiple answer density options.

Accordion FAQ

Compact and easy to scan.

Split FAQ

FAQ column plus a contextual next step.

Editorial FAQ

Longer answers for more complex products.

Variants

Accordion FAQ

Default compact FAQ treatment.

Split FAQ

Questions plus a support or CTA rail.

Editorial FAQ

Longer answers with section headers.

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}>Answer the buyer questions before support gets the ticket.</Heading>
    <Text as="p">FAQ sections include routing, supporting actions, and multiple answer density options.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open FAQs</Button>
        <Button variant="outline">Pair with pricing page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Accordion FAQ</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Compact and easy to scan.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Split FAQ</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">FAQ column plus a contextual next step.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Editorial FAQ</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Longer answers for more complex products.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
  </Stack>
</Container>