Price Table
PriceTable004
A pricing table template. Below the "md" breakpoint, it switches to a single column layout with items stacked vertically.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Button } from '@lism-css/ui/astro/Button';
import { Container, Flex, Grid, Icon, Stack, Box, Columns, Text, Inline, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="PriceTable004">
<Container isWrapper="l" bgc="base" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">Pricing Plans</Heading>
<Columns cols={['1', null, '3']} g="30">
<Grid gtr="subgrid" gr="span 4" g="30" bgc="white" 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="xl" fw="bold">Free</Inline>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
No setup fees or hidden charges. You can access all features with only the displayed monthly rate. There are no contract commitments, so
you can change or cancel your plan at any time with peace of mind.
</Text>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Tax return document creation</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Bank & card integration</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Auto journal entry</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Monthly financial reports</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Team invitations (up to 3)</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Data backup</Inline></Flex>
</Stack>
<Button href="#" bgc="blue" py="15" bdrs="10">Get Started</Button>
</Grid>
<Grid gtr="subgrid" gr="span 4" g="30" bgc="gray:5%" 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="xl" fw="bold">$19.80</Inline>
<Inline class="u--trim" fz="xs" fw="bold">/mo</Inline>
</Flex>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
Comprehensive support from our dedicated specialists is included. Feel free to reach out via email or chat anytime for questions about
operations or accounting consultations.
</Text>
<Stack g="30">
<Box ta="center" bd bdc="blue" bgc="white" bdrs="10">
<Inline class="u--trim" d="block" fz="s" c="blue" p="15">Everything in Hobby, plus</Inline>
</Box>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Team invitations (up to 10)</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Chat support</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Phone support</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">API integration</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Invoice mailing service</Inline></Flex>
</Stack>
</Stack>
<Button href="#" py="15" bdrs="10">Choose Plan</Button>
</Grid>
<Grid gtr="subgrid" gr="span 4" g="30" bgc="gray:5%" 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="xl" fw="bold">$99.80</Inline>
<Inline class="u--trim" fz="xs" fw="bold">/mo</Inline>
</Flex>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
Support built for serious business needs is included. With even more comprehensive support than the Personal plan, you can use the service
with complete confidence.
</Text>
<Stack g="30">
<Box ta="center" bd bdc="blue" bgc="white" bdrs="10">
<Inline class="u--trim" d="block" fz="s" c="blue" p="15">Everything in Personal, plus</Inline>
</Box>
<Stack as="ul" g="10">
<Flex as="li" g="15" ai="center">
<Icon icon="check" c="blue" /><Inline fz="s">Team invitations (up to 99)</Inline>
</Flex>
<Flex as="li" g="15" ai="center">
<Icon icon="check" c="blue" /><Inline fz="s">Chat support (priority)</Inline>
</Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">Phone support (priority)</Inline></Flex>
<Flex as="li" g="15" ai="center"><Icon icon="check" c="blue" /><Inline fz="s">API integration (unlimited)</Inline></Flex>
</Stack>
</Stack>
<Button href="#" py="15" bdrs="10">Choose Plan</Button>
</Grid>
</Columns>
</Stack>
</Container>
</DemoLayout> style.css