Preview

Event starter

A full event starter with registration, schedule, and speaker proof.

This starter brings together hero, stats, team sections, FAQs, and CTA blocks for an event site.

Registration hero

Event headline, date, and registration CTA.

Schedule highlights

Program overview or session teaser blocks.

Speaker grid

Speaker and team identity sections.

Included patterns

• Event hero

• Schedule or agenda section

• Speaker grid

• FAQ

Variants

Registration-first

Hero and CTA rhythm optimized for registration.

Agenda-first

Event starter that foregrounds schedule and speakers.

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">Event starter</Badge>
    <Heading level={1}>A full event starter with registration, schedule, and speaker proof.</Heading>
    <Text as="p">This starter brings together hero, stats, team sections, FAQs, and CTA blocks for an event site.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Registration hero</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Event headline, date, and registration CTA.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Schedule highlights</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Program overview or session teaser blocks.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Speaker grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Speaker and team identity sections.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Event hero</Text>
        <Text as="p">• Schedule or agenda section</Text>
        <Text as="p">• Speaker grid</Text>
        <Text as="p">• FAQ</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">Use team sections</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Conference / Event Starter