Preview

Open in new tab

Travel booking surface

Package search results that understand policy, spend, and traveler context.

Travel Result Cards combine StatCard, Chip, AvatarGroup, and Badge treatments into reusable booking outputs.

4

result variants

3

policy states

2

comparison rows

Card	Primary signal	Decision support
Flight	Fare + timing	Policy + CO2
Hotel	Nightly rate	Distance + colleague proof
Rail	Arrival time	Emissions comparison

Built from: Card, AvatarGroup, Chip, Badge, Button, and StatCard.
Best for: Corporate travel search, fare comparison, and negotiated-rate booking flows.

Included patterns

• Policy badge treatment

• Social-proof avatar stack

• Negotiated-rate framing

Variants

Flight result

Airline, timing, fare, policy, and CO2 summary on one card.

Hotel result

Property photo, negotiated rate, colleague proof, and distance context.

Fare matrix

Bundle comparison row for basic, flex, and premium fares.

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>Travel booking surface</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="#">Flights</Sidebar.Item>
            <Sidebar.Item href="#">Hotels</Sidebar.Item>
            <Sidebar.Item href="#">Rail</Sidebar.Item>
            <Sidebar.Item href="#">Cars</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Package search results that understand policy, spend, and traveler context.</PageHeader.Title>
          <PageHeader.Description>Travel Result Cards combine StatCard, Chip, AvatarGroup, and Badge treatments into reusable booking outputs.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">result variants</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">policy states</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">comparison rows</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Card</Table.Head>
              <Table.Head>Primary signal</Table.Head>
              <Table.Head>Decision support</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Flight</Table.Cell>
              <Table.Cell>Fare + timing</Table.Cell>
              <Table.Cell>Policy + CO2</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Hotel</Table.Cell>
              <Table.Cell>Nightly rate</Table.Cell>
              <Table.Cell>Distance + colleague proof</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Rail</Table.Cell>
              <Table.Cell>Arrival time</Table.Cell>
              <Table.Cell>Emissions comparison</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Card, AvatarGroup, Chip, Badge, Button, and StatCard.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Corporate travel search, fare comparison, and negotiated-rate booking flows.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Policy badge treatment</Text>
        <Text as="p">• Social-proof avatar stack</Text>
        <Text as="p">• Negotiated-rate framing</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>