Page Links
PageLinks07
A navigation pattern. Items have a minimum width set, and the number of columns changes according to the container width. Below the "md" breakpoint, it displays in a single column.
en.astro
---
import { ArrowRightIcon, CaretRightIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Flex, Grid, AutoColumns, Icon, BoxLink, Stack, Text, Heading } from 'lism-css/astro';
---
<DemoLayout title="PageLinks07">
<Container isWrapper="l" bgc="base" py="50" hasGutter>
<Grid gtc={['auto', null, 'auto 1fr']} g="50 60">
<Stack ai="flex-start" g="30">
<Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">Product Categories</Heading>
<Text class="u--trim" fz="s" o="p">Browse by category</Text>
</Stack>
<Stack g="40">
<AutoColumns cols="16rem" g="0 40" pt="1px">
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">Kitchen Appliances</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">Audio</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">Home Appliances</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">Refrigerators</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">Washers & Garment Care</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">Beauty</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">Lighting</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
<BoxLink href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y set="hov">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">PCs & Peripherals</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon={CaretRightIcon} weight="bold" fz="xs" c="white" />
</Flex>
</BoxLink>
</AutoColumns>
<Flex jc="flex-end">
<BoxLink href="#" layout="flex" ai="center" g="10" hasTransition hov={{ c: 'link' }}>
<Text class="u--trim">View All Categories</Text>
<Icon icon={ArrowRightIcon} weight="bold" />
</BoxLink>
</Flex>
</Stack>
</Grid>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:cLink {
color: var(--_isHov, var(--link));
}
}
</style>