Page Links
PageLinks05
A pattern for featured content. Below the "md" breakpoint, it displays in 2 columns, and below "sm" it switches to a single column.
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, BoxLink, Container, Frame, Columns, Media, Flex, Text, Heading } from 'lism-css/astro';
---
<DemoLayout title="PageLinks05">
<Container isWrapper="l" bgc="base-2" py="50" hasGutter>
<Stack g="40">
<Heading level="2" fz="2xl" fw="bold" ta="center">Product Categories</Heading>
<Stack g="40">
<Columns cols={['1', '2', '4']} g="40">
<BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
<Frame as="figure" ar="1/1" bdrs="10" pos="relative">
<Media
src="https://images.unsplash.com/photo-1564584217132-2271feaeb3c5?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
hasTransition
hov="in:zoom"
/>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">Apparel</Text>
<Text class="u--trim" fz="s" o="p">Clothing with thoughtful fabrics and silhouettes, made to anchor your everyday looks.</Text>
</Stack>
<Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
<Text fz="s">View More</Text>
</Flex>
</BoxLink>
<BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
<Frame as="figure" ar="1/1" bdrs="10" pos="relative">
<Media
src="https://images.unsplash.com/photo-1587563871167-1ee9c731aefb?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
hasTransition
hov="in:zoom"
/>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">Shoes</Text>
<Text class="u--trim" fz="s" o="p">Shoes that balance comfort and style, a pair you will want to wear every day.</Text>
</Stack>
<Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
<Text fz="s">View More</Text>
</Flex>
</BoxLink>
<BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
<Frame as="figure" ar="1/1" bdrs="10" pos="relative">
<Media
src="https://images.unsplash.com/photo-1591209608777-fb022eac7112?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
hasTransition
hov="in:zoom"
/>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">Accessories</Text>
<Text class="u--trim" fz="s" o="p">Timeless accessories that subtly elevate any outfit.</Text>
</Stack>
<Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
<Text fz="s">View More</Text>
</Flex>
</BoxLink>
<BoxLink layout="grid" gtr="subgrid" gr="span 3" set="hov" g="30" href="#">
<Frame as="figure" ar="1/1" bdrs="10" pos="relative">
<Media
src="https://images.unsplash.com/photo-1564836950275-14737b1b6af7?auto=format&fit=max&w=1920&q=80"
alt=""
width="960"
height="640"
hasTransition
hov="in:zoom"
/>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">Cosmetics</Text>
<Text class="u--trim" fz="s" o="p">Gentle formulas and refined scents turn your daily routine into a pleasant moment.</Text>
</Stack>
<Flex mbs="auto" jc="center" bd bdc hl="xs" p="10" bdrs="10" hasTransition hov="in:reverse">
<Text fz="s">View More</Text>
</Flex>
</BoxLink>
</Columns>
</Stack>
</Stack>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:zoom {
scale: var(--_isHov, 1.1);
}
.-hov\:in\:reverse {
background-color: var(--_isHov, var(--black));
color: var(--_isHov, var(--white));
}
}
</style>