Page Links
PageLinks03
A pattern for featured content. Below the "md" breakpoint, it switches to a single column layout with items stacked vertically.
en.astro
---
import { ArrowRightIcon } from '@lism-css/icons/astro';
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Grid, Columns, Media, Flex, Icon, Layer, Text, Heading } from 'lism-css/astro';
---
<DemoLayout title="PageLinks03">
<Container isWrapper="l" py="50" hasGutter>
<Stack g="50">
<Heading class="u--trim" level="2" fz="2xl" ta="center">Uncharted Experiences</Heading>
<Columns cols={[1, null, 3]} g="30">
<Stack g="20">
<Frame as="a" isBoxLink href="#" pos="relative" ar={['4/3', null, '3/4']} bdrs="10" bxsh="30" td="none" 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 / 20%)" />
<Stack pos="relative" h="100%" jc="flex-end" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20" class="u--trimAll">
<Text fz="l" fw="bold" hl="s">Innovative Technology</Text>
<Text fz="s" hl="s" o="p">Advanced Technology</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" c="white" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</Frame>
<Text pb="20">Leveraging cutting-edge AI and robotics to support the industries of tomorrow with high-precision manufacturing.</Text>
</Stack>
<Stack g="20">
<Frame as="a" isBoxLink href="#" pos="relative" ar={['4/3', null, '3/4']} bdrs="10" bxsh="30" td="none" 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 / 20%)" />
<Stack pos="relative" h="100%" jc="flex-end" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20" class="u--trimAll">
<Text fz="l" fw="bold" hl="s">Rigorous Quality Control</Text>
<Text fz="s" hl="s" o="p">Quality First</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" c="white" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</Frame>
<Text pb="20">Pursuing micron-level precision, we deliver trust and reliability in every product we create.</Text>
</Stack>
<Stack g="20">
<Frame as="a" isBoxLink href="#" pos="relative" ar={['4/3', null, '3/4']} bdrs="10" bxsh="30" td="none" 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 / 20%)" />
<Stack pos="relative" h="100%" jc="flex-end" c="white" p="30" g="20" mbs="auto">
<Grid gtc="1fr auto" ai="end" g="30">
<Stack g="20" class="u--trimAll">
<Text fz="l" fw="bold" hl="s">Global Supply Network</Text>
<Text fz="s" hl="s" o="p">Global Network</Text>
</Stack>
<Flex ai="center" jc="center" bd bdc="white" p="15" bdrs="99" c="white" hasTransition hov="in:reverse">
<Icon icon={ArrowRightIcon} weight="bold" fz="s" />
</Flex>
</Grid>
</Stack>
</Frame>
<Text pb="20">Connecting hubs around the world to respond swiftly and flexibly to customer needs through our global supply network.</Text>
</Stack>
</Columns>
</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>