Pricing
Pricing01
A pricing table pattern. Below the "md" breakpoint, it switches to a single column layout with items stacked vertically.
---
import { CheckIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Button } from '@lism-css/ui/astro/Button';
import { Tabs } from '@lism-css/ui/astro/Tabs';
import { Container, Flex, Grid, Icon, Stack, Columns, Text, Inline, Heading } from 'lism-css/astro';
import './_style.css';
const billingPeriods = [
{ label: 'Monthly', personal: '$19.80', pro: '$99.80', unit: '/mo' },
{ label: 'Yearly', personal: '$198', pro: '$998', unit: '/yr' },
];
---
<DemoLayout title="Pricing01">
<Container isWrapper="l" bgc="base" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">DevFlow Pricing Plans</Heading>
<Tabs.Root class="c--pricingTab" g="30" listProps={{ 'aria-label': 'Billing period' }}>
{
billingPeriods.map((period) => (
<Tabs.Item>
<Tabs.Tab px="25" py="10" bdrs="20" fw="bold">
{period.label}
</Tabs.Tab>
<Tabs.Panel>
<Columns cols={['1', null, '3']} g="30">
<Grid gtr="subgrid" gr="span 4" g="30" bgc="base" p="40" bd bdc="blue" bdw="2px" bdrs="20" bxsh="20">
<Stack w="stretch" g="20">
<Inline class="u--trim" fz="m" fw="bold" c="blue">
Hobby
</Inline>
<Inline class="u--trim" fz="2xl" fw="bold">
Free
</Inline>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
Simple task management for individuals and small teams.
</Text>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Task management</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Board & list views</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Project progress tracking</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Calendar view</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Team invitations (up to 3)</Inline>
</>
</Flex>
</Stack>
<Button href="#" bgc="blue" py="15" bdrs="10">
Get Started
</Button>
</Grid>
<Grid gtr="subgrid" gr="span 4" g="30" bgc="base-2" p="40" bdrs="20" bxsh="20">
<Stack w="stretch" g="20">
<Inline class="u--trim" fz="m" fw="bold" c="blue">
Personal
</Inline>
<Flex ai="end" g="10">
<Inline class="u--trim" fz="2xl" fw="bold">
{period.personal}
</Inline>
<Inline class="u--trim" fz="xs" fw="bold">
{period.unit}
</Inline>
</Flex>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
Keep teamwork moving with shared knowledge and automation.
</Text>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Everything in Hobby</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Team invitations (up to 10)</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Document sharing</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">File management</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Recurring tasks & notifications</Inline>
</>
</Flex>
</Stack>
<Button href="#" py="15" bdrs="10">
Choose Plan
</Button>
</Grid>
<Grid gtr="subgrid" gr="span 4" g="30" bgc="base-2" p="40" bdrs="20" bxsh="20">
<Stack w="stretch" g="20">
<Inline class="u--trim" fz="m" fw="bold" c="blue">
Pro
</Inline>
<Flex ai="end" g="10">
<Inline class="u--trim" fz="2xl" fw="bold">
{period.pro}
</Inline>
<Inline class="u--trim" fz="xs" fw="bold">
{period.unit}
</Inline>
</Flex>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
Manage multiple projects efficiently across your team.
</Text>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Everything in Personal</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Team invitations (up to 99)</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Cross-project reports</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Member permissions</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Priority support</Inline>
</>
</Flex>
</Stack>
<Button href="#" py="15" bdrs="10">
Choose Plan
</Button>
</Grid>
</Columns>
</Tabs.Panel>
</Tabs.Item>
))
}
</Tabs.Root>
</Stack>
</Container>
</DemoLayout>@layer lism-custom {
.c--pricingTab > .b--tabs_list {
justify-self: center;
padding: 4px;
gap: 2px;
background-color: var(--base-2);
border-radius: var(--bdrs--30);
box-shadow: var(--bxsh--10);
}
.c--pricingTab .b--tabs_tab {
padding: 0.5em 0.875em;
border-radius: calc(var(--bdrs--30) - 2px); /* bdrs - (親の p / 2) */
background-color: var(--_isSelected, var(--base));
box-shadow: var(--_isSelected, var(--bxsh--20));
}
}