Feature
Feature015
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, Media, Stack, Text, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Feature015">
<Container isWrapper="l" bgc="base" py="50" hasGutter>
<Stack g="20" ai="center" mb="40">
<Heading level="2" class="u--trim" fz="2xl" fw="bold">Commitment to Quality</Heading>
<Text class="u--trim" fz="s" ta="center" o="pp">Product Features</Text>
</Stack>
<Stack>
<Grid gtc={['auto', null, 'minmax(20vw, 32%) repeat(2, 1fr)']} g="40" py="40" bd-y-e>
<Frame as="figure" ar="16/9" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
</Frame>
<Stack class="u--trimAll" g="20">
<Text fz="l" fw="bold" lts="l">A Cup That Awakens Like<br />the Morning Sun</Text>
<Text fz="s" o="pp">Morning Awakening Blend</Text>
</Stack>
<Stack class="u--trimAll" g="20">
<p>
Blended for busy mornings, this coffee features a refreshing acidity and crisp finish. Bright citrus-like aromas gently awaken your senses
and bring positive energy to your day. Start with it black to enjoy its clear, pure flavor.
</p>
</Stack>
</Grid>
<Grid gtc={['auto', null, 'minmax(20vw, 32%) repeat(2, 1fr)']} g="40" py="40" bd-y-e>
<Frame as="figure" ar="16/9" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
</Frame>
<Stack class="u--trimAll" g="20">
<Text fz="l" fw="bold" lts="l">Deep Comfort for<br />an Afternoon Moment</Text>
<Text fz="s" o="pp">Afternoon Comfort Blend</Text>
</Stack>
<Stack class="u--trimAll" g="20">
<p>
The perfect companion for reading or taking a break, with a well-balanced mild flavor. Nutty richness and gentle milk chocolate sweetness
transform your afternoon into a peaceful, fulfilling moment. A cup of comfort to unwind your mind and body.
</p>
</Stack>
</Grid>
<Grid gtc={['auto', null, 'minmax(20vw, 32%) repeat(2, 1fr)']} g="40" py="40">
<Frame as="figure" ar="16/9" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
</Frame>
<Stack class="u--trimAll" g="20">
<Text fz="l" fw="bold" lts="l">An Evening Blend to<br />Free Your Mind</Text>
<Text fz="s" o="pp">Midnight Calm Decaf</Text>
</Stack>
<Stack class="u--trimAll" g="20">
<p>
A decaf coffee designed exclusively for evenings, with 99.9% of the caffeine removed. Using only natural water without any chemicals for
the decaffeination process. Preserving the rich body and deep aroma of coffee, it is perfect for relaxing before bed or for those who
prefer to limit caffeine intake.
</p>
</Stack>
</Grid>
</Stack>
</Container>
</DemoLayout> style.css