Feature
Feature003
A template for featured content. Below the "md" breakpoint, the layout changes and item arrangement is adjusted.
↓
Code
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Grid, Columns, Media, Flex, Layer, Center, Text, Inline, Group } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
import './_style.css';
---
<DemoLayout title="Feature003">
<Container isWrapper="l" py="50" hasGutter>
<Grid gtc={['1fr', null, 'min(20vw, 20rem) 1fr 1fr']} gtr={['1fr', null, '1fr auto auto 1fr']} g={['40', null, '40 50']}>
<Stack gr={['1', null, '2']} g="40" class="u--trimAll">
<h2>Beyond the Vision</h2>
<Text fz="s">
We cherish the traditions and festivals passed down in this region and work to connect them to the next generation. We rediscover and
nurture the local charm through our activities.
</Text>
</Stack>
<Columns gr={['2', null, '1 / -1']} gc={['1', null, '2 / -1']} cols={['1', '2']} g="40">
<Grid gtr="auto 1fr" isBoxLink as="a" href="#" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="3/2" 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="2xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30" p="30" class="u--trimAll">
<Text fz="l" fw="bold">Shaping the Future Together</Text>
<Text fz="s" o="p">A project where residents play the leading role, working through dialogue to solve community challenges.</Text>
</Stack>
</Grid>
<Grid gtr="auto 1fr" isBoxLink as="a" href="#" bdrs="10" bxsh="20" ov="hidden" set="var:hov" hasTransition hov="-bxsh">
<Frame as="figure" ar="3/2" 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="2xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30" p="30" class="u--trimAll">
<Text fz="l" fw="bold">Passing Traditions to the Next Generation</Text>
<Text fz="s" o="p">
We cherish the traditions and festivals of this region, rediscovering local charm and nurturing activities for the future.
</Text>
</Stack>
</Grid>
</Columns>
<Group gr="3">
<Flex ai="center" g="15">
<Button href="#" min-w={['100%', null, '150px']} p="15" bdrs="10">View More</Button>
</Flex>
</Group>
</Grid>
</Container>
</DemoLayout> style.css