Feature
Feature001
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, Flex, Icon, Text, Inline } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Feature001">
<Container isWrapper="l" py="50" hasGutter>
<Stack g="40">
<Stack ai="center" g="15">
<h2>Where New Challenges Begin</h2>
<Text fz="s" my-s="15" o="p">We are committed to creating an environment where everyone can live with peace of mind.</Text>
</Stack>
<Columns cols={['1', null, '3']} g="40">
<Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="og">
<Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
</Frame>
<Stack g="30" p="30" className="u--trimAll">
<Text fz="m" fw="bold">Shaping the Future Together</Text>
<Text fz="s" o="pp">
A project where every resident plays a leading role, working together through dialogue to solve community challenges.
</Text>
<Flex ai="center" jc="flex-end" g="15" my-s="auto" hasTransition hov="in:solid">
<Inline fz="xs" fs="i">View More</Inline>
<Icon icon="arrow-right" fz="xs" />
</Flex>
</Stack>
</Grid>
<Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="og">
<Media src="https://cdn.lism-css.com/img/a-2.jpg" alt="" width="960" height="640" />
</Frame>
<Stack g="30" p="30" className="u--trimAll">
<Text fz="m" fw="bold">Passing Traditions to the Next Generation</Text>
<Text fz="s" lh="s" o="pp">
Preserving festivals passed down through generations and creating opportunities for children to experience local culture.
</Text>
<Flex ai="center" jc="flex-end" g="15" my-s="auto" hasTransition hov="in:solid">
<Inline fz="xs" fs="i">View More</Inline>
<Icon icon="arrow-right" fz="xs" />
</Flex>
</Stack>
</Grid>
<Grid g="0" as="a" isBoxLink href="#" gtr="subgrid" gr="span 2" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="og">
<Media src="https://cdn.lism-css.com/img/a-4.jpg" alt="" width="960" height="640" />
</Frame>
<Stack g="30" p="30" className="u--trimAll">
<Text fz="m" fw="bold">A Safe Community for All</Text>
<Text fz="s" lh="s" o="pp">We regularly conduct security patrols and disaster drills to strengthen community cooperation.</Text>
<Flex ai="center" jc="flex-end" g="15" my-s="auto" hasTransition hov="in:solid">
<Inline fz="xs" fs="i">View More</Inline>
<Icon icon="arrow-right" fz="xs" />
</Flex>
</Stack>
</Grid>
</Columns>
</Stack>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:solid {
opacity: var(--_notHov, var(--o--ppp));
}
}
</style> style.css