Pricing
Pricing01
価格表用のパターンです。breakpoint「md」以下は1カラムになり、アイテムが縦に並びます。
---
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: '月額', personal: '1,980', pro: '9,980', unit: '円/月' },
{ label: '年額', personal: '19,800', pro: '99,800', unit: '円/年' },
];
---
<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の料金プラン</Heading>
<Tabs.Root class="c--pricingTab" g="30" listProps={{ 'aria-label': '請求期間' }}>
{
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">
無料
</Inline>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
個人や小さなチームで、気軽にタスク管理を始めたい方に。
</Text>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">タスク管理</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">ボード・リスト表示</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">プロジェクトの進捗確認</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">カレンダー表示</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">メンバー招待（最大3名）</Inline>
</>
</Flex>
</Stack>
<Button href="#" bgc="blue" py="15" bdrs="10">
今すぐはじめる
</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">
情報共有と作業の自動化で、チームの仕事をスムーズに。
</Text>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Hobbyのすべて</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">メンバー招待（最大10名）</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">ドキュメント共有</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">ファイル管理</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">定期タスク・通知の自動化</Inline>
</>
</Flex>
</Stack>
<Button href="#" py="15" bdrs="10">
このプランを選択
</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">
複数のプロジェクトを、チーム全体で効率よく管理。
</Text>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">Personalのすべて</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">メンバー招待（最大99名）</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">プロジェクト横断レポート</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">メンバーの権限管理</Inline>
</>
</Flex>
<Flex as="li" g="15" ai="center">
<>
<Icon icon={CheckIcon} c="blue" />
<Inline fz="s">優先サポート</Inline>
</>
</Flex>
</Stack>
<Button href="#" py="15" bdrs="10">
このプランを選択
</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));
}
}