Page Links
PageLinks06
A navigation pattern. Items have a minimum width set, and the number of columns changes according to the container width.
en.astro
---
import { ArrowRightIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Grid, AutoColumns, Media, Flex, Icon, Layer, BoxLink, Text, Inline, Heading } from 'lism-css/astro';
---
<DemoLayout title="PageLinks06">
<Container isWrapper="l" py="50">
<Stack g="40">
<Stack ai="center" g="20" hasGutter>
<Heading level="2" class="u--trim" fz="2xl" fw="bold">Wonderful Journeys Await</Heading>
<Inline class="u--trim" fz="s" o="pp">Good experience</Inline>
</Stack>
<AutoColumns cols="22rem">
<BoxLink layout="frame" href="#" pos="relative" ar="4/3" bxsh="30" set="hov">
<Media isLayer src="https://cdn.lism-css.com/random/img?category=v&r=1" alt="" width="960" height="640" hasTransition hov="in:zoom" />
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="relative" h="100%" jc="fe" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold" hl="s">Ultimate Luxury</Text>
<Text class="u--trim" fz="s" hl="s" o="p">LUXURY TRAVEL</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</BoxLink>
<BoxLink layout="frame" href="#" pos="relative" ar="4/3" bxsh="30" set="hov">
<Media isLayer src="https://cdn.lism-css.com/random/img?category=v&r=2" alt="" width="960" height="640" hasTransition hov="in:zoom" />
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="relative" h="100%" jc="fe" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold" hl="s">Nature Adventures</Text>
<Text class="u--trim" fz="s" hl="s" o="p">ADVENTURE TRAVEL</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</BoxLink>
<BoxLink layout="frame" href="#" pos="relative" ar="4/3" bxsh="30" set="hov">
<Media isLayer src="https://cdn.lism-css.com/random/img?category=v&r=3" alt="" width="960" height="640" hasTransition hov="in:zoom" />
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="relative" h="100%" jc="fe" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold" hl="s">Cultural Discovery</Text>
<Text class="u--trim" fz="s" hl="s" o="p">CULTURAL TOURS</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</BoxLink>
<BoxLink layout="frame" href="#" pos="relative" ar="4/3" bxsh="30" set="hov">
<Media isLayer src="https://cdn.lism-css.com/random/img?category=v&r=4" alt="" width="960" height="640" hasTransition hov="in:zoom" />
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="relative" h="100%" jc="fe" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold" hl="s">Family Fun</Text>
<Text class="u--trim" fz="s" hl="s" o="p">FAMILY TRIPS</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</BoxLink>
<BoxLink layout="frame" href="#" pos="relative" ar="4/3" bxsh="30" set="hov">
<Media isLayer src="https://cdn.lism-css.com/random/img?category=v&r=5" alt="" width="960" height="640" hasTransition hov="in:zoom" />
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="relative" h="100%" jc="fe" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold" hl="s">Solo Wandering</Text>
<Text class="u--trim" fz="s" hl="s" o="p">SOLO TRAVEL</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</BoxLink>
<BoxLink layout="frame" href="#" pos="relative" ar="4/3" bxsh="30" set="hov">
<Media isLayer src="https://cdn.lism-css.com/random/img?category=v&r=6" alt="" width="960" height="640" hasTransition hov="in:zoom" />
<Layer bgc="rgb(0 0 0 / 35%)" />
<Stack pos="relative" h="100%" jc="fe" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold" hl="s">Restore Your Mind</Text>
<Text class="u--trim" fz="s" hl="s" o="p">WELLNESS RETREATS</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</BoxLink>
</AutoColumns>
</Stack>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:zoom {
scale: var(--_isHov, 1.1);
}
.-hov\:in\:reverse {
background-color: var(--_isHov, var(--white));
color: var(--_isHov, var(--black));
}
}
</style>