Preview

Education starter

A course starter with outcomes, curriculum structure, and signup paths.

This starter combines hero, feature sections, testimonials, and pricing or registration modules for learning products.

Program hero

Outcome-driven intro with mentor or cohort proof.

Curriculum blocks

Module or outcome sections with detail lists.

Enrollment CTA

Pricing or registration-oriented CTA band.

Included patterns

• Hero

• Curriculum section

• Proof + CTA

Variants

Cohort launch

Program-first course page with timeline and CTA.

Curriculum-first

Course starter focused on modules and outcomes.

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">Education starter</Badge>
    <Heading level={1}>A course starter with outcomes, curriculum structure, and signup paths.</Heading>
    <Text as="p">This starter combines hero, feature sections, testimonials, and pricing or registration modules for learning products.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Program hero</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Outcome-driven intro with mentor or cohort proof.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Curriculum blocks</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Module or outcome sections with detail lists.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Enrollment CTA</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Pricing or registration-oriented CTA band.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Hero</Text>
        <Text as="p">• Curriculum section</Text>
        <Text as="p">• Proof + CTA</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">Use pricing sections</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Course / Education Starter