Feature
Feature010
A template for featured content. Below the "md" breakpoint, it displays in a single column with items stacked vertically.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Columns, Grid, Media, Icon, Flex, Text, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Feature010">
<Container isWrapper="l" py="50" hasGutter>
<Stack g="50">
<Heading level="2" fz="2xl" fw="bold" ta="center">Curated Products</Heading>
<Columns cols={['1', '2', '4']} gtr="auto auto auto" g="40">
<Grid gtr="subgrid" gr="span 3" g="30" as="a" isBoxLink href="#" set="var:hov">
<Frame as="figure" ar="1/1" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" hasTransition hov="in:zoom" />
</Frame>
<Stack g="inherit">
<Text class="u--trim" fz="l" fw="bold">Storm Shield</Text>
<Text class="u--trim" fz="m" lh="s" o="pp">
Built to withstand sudden rain and wind with exceptional durability. An all-season tent that even beginners can set up with ease.
</Text>
</Stack>
<Flex g="20" ai="center" bd-b px="15" pb="10" hasTransition hov="in:cAccent">
<Text fz="m" fx="1" fs="i">View Detail</Text>
<Icon icon="arrow-right" fz="m" />
</Flex>
</Grid>
<Grid gtr="subgrid" gr="span 3" g="30" as="a" isBoxLink href="#" set="var:hov">
<Frame as="figure" ar="1/1" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" hasTransition hov="in:zoom" />
</Frame>
<Stack g="inherit">
<Text class="u--trim" fz="l" fw="bold">Ridge Walker</Text>
<Text class="u--trim" fz="m" lh="s" o="pp">
Features a back ventilation system to reduce moisture buildup. A popular model suitable for day hikes to hut stays.
</Text>
</Stack>
<Flex g="20" ai="center" bd-b px="15" pb="10" hasTransition hov="in:cAccent">
<Text fz="m" fx="1" fs="i">View Detail</Text>
<Icon icon="arrow-right" fz="m" />
</Flex>
</Grid>
<Grid gtr="subgrid" gr="span 3" g="30" as="a" isBoxLink href="#" set="var:hov">
<Frame as="figure" ar="1/1" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" hasTransition hov="in:zoom" />
</Frame>
<Stack g="inherit">
<Text class="u--trim" fz="l" fw="bold">Aurora Down</Text>
<Text class="u--trim" fz="m" lh="s" o="pp">
Made with premium 750 fill-power down. Rated to -5°C for comfortable sleep even during autumn and winter camping.
</Text>
</Stack>
<Flex g="20" ai="center" bd-b px="15" pb="10" hasTransition hov="in:cAccent">
<Text fz="m" fx="1" fs="i">View Detail</Text>
<Icon icon="arrow-right" fz="m" />
</Flex>
</Grid>
<Grid gtr="subgrid" gr="span 3" g="30" as="a" isBoxLink href="#" set="var:hov">
<Frame as="figure" ar="1/1" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" hasTransition hov="in:zoom" />
</Frame>
<Stack g="inherit">
<Text class="u--trim" fz="l" fw="bold">Field Relax Chair</Text>
<Text class="u--trim" fz="m" lh="s" o="pp">
Enveloping comfort that cradles your body. Lightweight and compact design makes it easy to carry and set up in no time.
</Text>
</Stack>
<Flex g="20" ai="center" bd-b px="15" pb="10" hasTransition hov="in:cAccent">
<Text fz="m" fx="1" fs="i">View Detail</Text>
<Icon icon="arrow-right" fz="m" />
</Flex>
</Grid>
</Columns>
</Stack>
</Container>
</DemoLayout>
<style is:inline>
@media (any-hover: hover) {
.-hov\:in\:zoom {
scale: var(--_isHov, 1.1);
}
.-hov\:in\:cAccent {
color: var(--_isHov, var(--accent));
}
}
</style> style.css