Feature
Feature008
特徴・注目コンテンツ用のテンプレートです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import Button from '@/components/ex/Button/index.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