Feature
Feature008
特徴・注目コンテンツ用のテンプレートです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Button } from '@lism-css/ui/astro';
import { Container, HTML, Frame, Columns, Grid, Media, Stack, Layer, Center } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Feature008">
<Container isWrapper="l" bgc="base" py="50" hasGutter>
<Grid gtr={['auto 1fr auto', null, 'auto 1fr']} gtc={['1fr', null, '1fr auto']} g="40">
<h2 class="u-trim">この季節だからこそ</h2>
<Columns cols={['1', '2', '3']} gc="1 / -1" g="40">
<Stack tag="a" isLinkBox href="#" g="30" setHov>
<Frame tag="figure" ar="16/9" bdrs="10" pos="rel">
<Media src="https://cdn.lism-css.com/img/random-2510?r=1" width="960" height="640" />
<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
<Center h="100%" c="white">
<HTML.span fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g="15">
<HTML.p class="u-trim" fz="m" fw="bold">夏のおすすめ</HTML.p>
<HTML.p class="u-trim" fz="s" o="-20">Summer recommended products</HTML.p>
</Stack>
</Stack>
<Stack tag="a" isLinkBox href="#" g="30" setHov>
<Frame tag="figure" ar="16/9" bdrs="10" pos="rel">
<Media src="https://cdn.lism-css.com/img/random-2510?r=2" width="960" height="640" />
<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
<Center h="100%" c="white">
<HTML.span fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g="15">
<HTML.p class="u-trim" fz="m" fw="bold">登山に使いやすい</HTML.p>
<HTML.p class="u-trim" fz="s" o="-20">Mountain special goods</HTML.p>
</Stack>
</Stack>
<Stack tag="a" isLinkBox href="#" g="30" setHov>
<Frame tag="figure" ar="16/9" bdrs="10" pos="rel">
<Media src="https://cdn.lism-css.com/img/random-2510?r=3" width="960" height="640" />
<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
<Center h="100%" c="white">
<HTML.span fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g="15">
<HTML.p class="u-trim" fz="m" fw="bold">秋の気配を感じて</HTML.p>
<HTML.p class="u-trim" fz="s" o="-20">Feeling the signs of autumn</HTML.p>
</Stack>
</Stack>
<Stack tag="a" isLinkBox href="#" g="30" setHov>
<Frame tag="figure" ar="16/9" bdrs="10" pos="rel">
<Media src="https://cdn.lism-css.com/img/random-2510?r=4" width="960" height="640" />
<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
<Center h="100%" c="white">
<HTML.span fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g="15">
<HTML.p class="u-trim" fz="m" fw="bold">旅をしたくなる季節</HTML.p>
<HTML.p class="u-trim" fz="s" o="-20">A season that makes you want to travel</HTML.p>
</Stack>
</Stack>
<Stack tag="a" isLinkBox href="#" g="30" setHov>
<Frame tag="figure" ar="16/9" bdrs="10" pos="rel">
<Media src="https://cdn.lism-css.com/img/random-2510?r=5" width="960" height="640" />
<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
<Center h="100%" c="white">
<HTML.span fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g="15">
<HTML.p class="u-trim" fz="m" fw="bold">おだやかな気候</HTML.p>
<HTML.p class="u-trim" fz="s" o="-20">Enjoy the mild weather</HTML.p>
</Stack>
</Stack>
<Stack tag="a" isLinkBox href="#" g="30" setHov>
<Frame tag="figure" ar="16/9" bdrs="10" pos="rel">
<Media src="https://cdn.lism-css.com/img/random-2510?r=6" width="960" height="640" />
<Layer setTransition hov="to:show" bgc="rgb(0 0 0 / 30%)" blur="4px">
<Center h="100%" c="white">
<HTML.span fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g="15">
<HTML.p class="u-trim" fz="m" fw="bold">森の中のさえずり</HTML.p>
<HTML.p class="u-trim" fz="s" o="-20">Feel the chirping in the forest</HTML.p>
</Stack>
</Stack>
</Columns>
<Button href="#" variant="outline" layout="grid" gr={['3', null, '1']} gc={['1 / -1', null, '2']} min-w="8rem" bdrs="10">
<span>View All</span>
</Button>
</Grid>
</Container>
</DemoLayout> style.css