Feature
Feature009
A template for featured content. Items have a minimum width set, and the number of columns changes according to the container width.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, AutoColumns, Grid, Media, Text, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Feature009">
<Container isWrapper="m" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">Our Initiatives</Heading>
<AutoColumns cols="300px" gtr="auto auto auto" g="40">
<Grid gtr="subgrid" gr="span 2" g="30">
<Frame as="figure" ar="og" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">Living in Harmony with Nature</Text>
<Text class="u--trim" fz="s" o="p">
Toward a society where people and nature coexist in abundance. We prioritize environmental consideration in every aspect of our business
to preserve a beautiful planet for future generations.
</Text>
</Stack>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30">
<Frame as="figure" ar="og" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">Gifts from the Earth</Text>
<Text class="u--trim" fz="s" o="p">
Our products are born from respect for nature. We carefully select only organic materials grown without pesticides and sustainable
resources.
</Text>
</Stack>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30">
<Frame as="figure" ar="og" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">A Weekend in Nature</Text>
<Text class="u--trim" fz="s" o="p">
Escape the city bustle and spend time touching soil and greenery. We offer programs like weekend farming experiences and forest walks to
engage all five senses with nature.
</Text>
</Stack>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30">
<Frame as="figure" ar="og" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">Like-Minded Community</Text>
<Text class="u--trim" fz="s" o="p">
This service is a community of people who share the same values. We share stories from creators and voices from users to expand the
circle of shared passion.
</Text>
</Stack>
</Grid>
</AutoColumns>
</Stack>
</Container>
</DemoLayout> style.css