Preview

Policy enforcement

Make policy visible at every decision point in the booking flow.

Policy Compliance compositions use Badge (dot + icon), Tooltip, Progress (thresholds), Field, Input, Alert, and Card to surface policy context inline.

3

compliance states

5

inline patterns

4

policy triggers

Best for: Travel booking flows, fare selection, and hotel rate comparison screens.
Pairs with: Trip Search Forms, Travel Result Cards, Approval Workflows.

Included patterns

• Dot badge for status indicators

• Icon badge for policy type

• Progress bar with thresholds

• Inline justification capture

Variants

Policy badge inline

Badge with dot and icon variants for in-context policy status.

Policy tooltip

Hover tooltip explaining policy limits and overrides.

Price-to-beat bar

Progress bar showing price vs. policy threshold.

Justification field

Required text field for out-of-policy bookings.

Policy summary panel

Card summarizing policy compliance for the current selection.

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>Policy enforcement</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="#">Policies</Sidebar.Item>
            <Sidebar.Item href="#">Rules</Sidebar.Item>
            <Sidebar.Item href="#">Exceptions</Sidebar.Item>
            <Sidebar.Item href="#">Reports</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}>Make policy visible at every decision point in the booking flow.</PageHeader.Title>
          <PageHeader.Description>Policy Compliance compositions use Badge (dot + icon), Tooltip, Progress (thresholds), Field, Input, Alert, and Card to surface policy context inline.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">compliance states</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">inline patterns</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">policy triggers</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Travel booking flows, fare selection, and hotel rate comparison screens.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Trip Search Forms, Travel Result Cards, Approval Workflows.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Dot badge for status indicators</Text>
        <Text as="p">• Icon badge for policy type</Text>
        <Text as="p">• Progress bar with thresholds</Text>
        <Text as="p">• Inline justification capture</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui

Policy Compliance System