Feature
Feature005
A template for featured content. Below the "md" breakpoint, it switches to a single column layout with items stacked vertically.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Columns, Grid, Media, Stack, Layer, Center, Text, Inline, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Feature005">
<Container isWrapper="m" bgc="base" py="50" hasGutter>
<Heading level="2" ta="center" mb="40">Our Products</Heading>
<Columns cols={[1, null, 2]} g={['30', null, '40']}>
<Grid as="a" isBoxLink href="#" gtc="1fr 2fr" bxsh="20" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="s" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30" p="30">
<Text class="u--trim" fz="m" fw="bold">Gentle on Fabrics</Text>
<Text class="u--trim" fz="s" o="p">Removes deep-set stains from fibers while minimizing fabric damage, leaving clothes soft and fresh.</Text
>
</Stack>
</Grid>
<Grid as="a" isBoxLink href="#" gtc="1fr 2fr" bxsh="20" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="s" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30" p="30">
<Text class="u--trim" fz="m" fw="bold">Designing the Air</Text>
<Text class="u--trim" fz="s" o="p"
>Beyond comfortable temperatures, the air purification feature suppresses viruses and pollen activity.</Text
>
</Stack>
</Grid>
<Grid as="a" isBoxLink href="#" gtc="1fr 2fr" bxsh="20" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="s" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30" p="30">
<Text class="u--trim" fz="m" fw="bold">A Feast Every Day</Text>
<Text class="u--trim" fz="s" o="p"
>With the power of superheated steam, anyone can easily create delicious professional-quality oven dishes.</Text
>
</Stack>
</Grid>
<Grid as="a" isBoxLink href="#" gtc="1fr 2fr" bxsh="20" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="s" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30" p="30">
<Text class="u--trim" fz="m" fw="bold">A Space That Invites Deep Breaths</Text>
<Text class="u--trim" fz="s" o="p"
>High-performance filters capture 99% of fine particles. Quiet operation makes it perfect for bedrooms.</Text
>
</Stack>
</Grid>
</Columns>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:zoom {
scale: var(--_isHov, 1.1);
}
}
</style> style.css