Navigation
Navigation006
A navigation template. Items have a minimum width set, and the number of columns changes according to the container width.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Grid, AutoColumns, Icon, BoxLink, Stack, Flex, Text, Inline, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
import './_style.css';
---
<DemoLayout title="Navigation006">
<Container isWrapper="l" bgc="base-2" py="50" hasGutter>
<Grid gtr={['auto 1fr auto', null, '1fr auto auto 1fr']} gtc={['auto', null, 'minmax(14rem, auto) 1fr']} ai="center" g="40">
<Stack gr={['1', null, '2']} gc="1" g="20">
<Text class="u--trim" fz="3xl" fw="bold" ff="accent" c="gray">Navigation</Text>
<Heading level="2" class="u--trim" fz="s" fw="normal" o="pp">Site Navigation</Heading>
</Stack>
<AutoColumns class="u--trimAll" gr={['2', null, '1 / -1']} gc={['1', null, '2']} cols="14rem" g="30 40">
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Kitchen</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Living</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Audio</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Lighting</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Limited Editions</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>About Us</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>History</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>News Releases</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Media Coverage</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Investor Relations</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Designer Interviews</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Behind the Scenes</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Customer Testimonials</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Blog</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Events</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>How We Work</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Open Positions</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>New Graduates</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Mid-career Hiring</Inline>
<Icon icon="caret-right" />
</BoxLink>
<BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
<Inline>Internships</Inline>
<Icon icon="caret-right" />
</BoxLink>
</AutoColumns>
<Flex gr={['3', null, '3']} gc={['1', null, '1']} g="15">
<Button g="15" variant="outline" href="#" w={['stretch', null, 'auto']} bdrs="10" hasTransition hov={{ bgc: 'black', c: 'white' }}>
<Inline gc="1" fz="s">View More</Inline>
<Icon icon="arrow-right" gc="2" fz="80%" />
</Button>
</Flex>
</Grid>
</Container>
</DemoLayout> style.css