Preview

Trip management

Itineraries that show every segment, status, and action at a glance.

Itinerary Timeline compositions use Timeline, Card, Badge, Alert, and Chip to render trip segments with confirmed/delayed/cancelled states.

4

segment types

3

status states

2

action types

Designed for: Trip detail pages, mobile itinerary views, and travel dashboard widgets.
Status handling: Confirmed (green), delayed (yellow), cancelled (red) badge treatments.

Included patterns

• Timeline-based segment layout

• Status badges per segment

• Change and cancel action buttons

• Alert banner for disruptions

Variants

Full trip timeline

Complete multi-day itinerary with all segments and status.

Single-day view

Condensed timeline for one travel day.

Compact card

Summary card with key segments and next action.

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 { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Trip management</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Overview</Sidebar.Item>
            <Sidebar.Item href="#">Itinerary</Sidebar.Item>
            <Sidebar.Item href="#">Expenses</Sidebar.Item>
            <Sidebar.Item href="#">Documents</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Itineraries that show every segment, status, and action at a glance.</PageHeader.Title>
          <PageHeader.Description>Itinerary Timeline compositions use Timeline, Card, Badge, Alert, and Chip to render trip segments with confirmed/delayed/cancelled states.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">segment types</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">status states</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">action types</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>Trip detail pages, mobile itinerary views, and travel dashboard widgets.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Status handling</DescriptionList.Term>
        <DescriptionList.Description>Confirmed (green), delayed (yellow), cancelled (red) badge treatments.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Timeline-based segment layout</Text>
        <Text as="p">• Status badges per segment</Text>
        <Text as="p">• Change and cancel action buttons</Text>
        <Text as="p">• Alert banner for disruptions</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>