Feature
Feature006
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, Grid, TileGrid, Media, Stack, Layer, Center, Text, Inline, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Feature006">
<Container isWrapper="m" bgc="base" py="50" hasGutter>
<Heading level="2" ta="center">Key Features</Heading>
<TileGrid cols={['1', null, '2']} rows={['1', null, '3']} my-s="40" g={['30', '40']}>
<Grid as="a" isBoxLink href="#" gr="1 / span 3" gtr="1fr auto" 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" hasTransition hov="in:zoom" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" 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="l" fw="bold">Gentle on Fabrics</Text>
<Text class="u--trim" fz="m" 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" hasTransition hov="in:zoom" />
<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" hasTransition hov="in:zoom" />
<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" hasTransition hov="in:zoom" />
<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>
</TileGrid>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:zoom {
scale: var(--_isHov, 1.1);
}
}
</style> style.css