Works
Works002
実績用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Grid, Media, HTML, Flex, Layer, Center, Cluster, Box } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.astro';
import './_style.css';
---
<DemoLayout title='Works002'>
<Container isWrapper='l' py='50' bgc='base-2' hasGutter>
<Stack g='40'>
<Stack ai='center' g='30'>
<HTML.h lv='2' class='u-trim' fz='4xl' fw='light' lts='l'>Works</HTML.h>
<HTML.p class='u-trim' fz='m' o='-20' lts='l'>制作実績</HTML.p>
</Stack>
<Cluster g='15'>
<Button href='####' px='20' py='10' bdrs='99'>すべて</Button>
<Button href='####' bgc='base' c='text' px='20' py='10' bdrs='99'>Web</Button>
<Button href='####' bgc='base' c='text' px='20' py='10' bdrs='99'>デザイン</Button>
<Button href='####' bgc='base' c='text' px='20' py='10' bdrs='99'>動画</Button>
<Button href='####' bgc='base' c='text' px='20' py='10' bdrs='99'>ブランディング</Button>
<Button href='####' bgc='base' c='text' px='20' py='10' bdrs='99'>音楽</Button>
</Cluster>
<Grid layout='fluidCols' cols='20rem' g='30'>
<Grid class='set-innerRs' gtr='subgrid' gr='span 2' g='20' bgc='base' bdrs='20' ai='start' setTransition hov='bxsh'>
<Stack tag='a' isLinkBox href='#' g='30' setHov p='20'>
<Frame tag='figure' ar='16/9' pos='rel' bdrs='inner'>
<Media src='https://cdn.lism-css.com/img/random-2510?r=1' alt='' 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='i' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g='30'>
<HTML.p class='u-trim' fz='m' fw='bold'>毎日の料理を心躍る体験に</HTML.p>
<Stack class='u-trimItems' tag='dl' g='15' fz='s' o='-20'>
<Flex g='5'><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g='5'><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
</Stack>
</Stack>
<Cluster g='15' px='20' pb='20'>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>Web</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>ブランディング</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>動画</Button>
</Cluster>
</Grid>
<Grid class='set-innerRs' gtr='subgrid' gr='span 2' g='20' bgc='base' bdrs='20' ai='start' setTransition hov='bxsh'>
<Stack tag='a' isLinkBox href='#' g='30' setHov p='20'>
<Frame tag='figure' ar='16/9' pos='rel' bdrs='inner'>
<Media src='https://cdn.lism-css.com/img/random-2510?r=2' alt='' 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='i' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g='30'>
<HTML.p class='u-trim' fz='m' fw='bold'>日々の暮らしの質を高めるアイテム</HTML.p>
<Stack class='u-trimItems' tag='dl' g='15' fz='s' o='-20'>
<Flex g='5'><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g='5'><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
</Stack>
</Stack>
<Cluster g='15' px='20' pb='20'>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>デザイン</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>動画</Button>
</Cluster>
</Grid>
<Grid class='set-innerRs' gtr='subgrid' gr='span 2' g='20' bgc='base' bdrs='20' ai='start' setTransition hov='bxsh'>
<Stack tag='a' isLinkBox href='#' g='30' setHov p='20'>
<Frame tag='figure' ar='16/9' pos='rel' bdrs='inner'>
<Media src='https://cdn.lism-css.com/img/random-2510?r=3' alt='' 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='i' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g='30'>
<HTML.p class='u-trim' fz='m' fw='bold'>オブジェのような佇まい</HTML.p>
<Stack class='u-trimItems' tag='dl' g='15' fz='s' o='-20'>
<Flex g='5'><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g='5'><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
</Stack>
</Stack>
<Cluster g='15' px='20' pb='20'>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>ブランディング</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>動画</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>音楽</Button>
</Cluster>
</Grid>
<Grid class='set-innerRs' gtr='subgrid' gr='span 2' g='20' bgc='base' bdrs='20' ai='start' setTransition hov='bxsh'>
<Stack tag='a' isLinkBox href='#' g='30' setHov p='20'>
<Frame tag='figure' ar='16/9' pos='rel' bdrs='inner'>
<Media src='https://cdn.lism-css.com/img/random-2510?r=4' alt='' 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='i' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g='30'>
<HTML.p class='u-trim' fz='m' fw='bold'>静かでクリーンなデザイン</HTML.p>
<Stack class='u-trimItems' tag='dl' g='15' fz='s' o='-20'>
<Flex g='5'><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g='5'><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
</Stack>
</Stack>
<Cluster g='15' px='20' pb='20'>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>Web</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>デザイン</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>音楽</Button>
</Cluster>
</Grid>
<Grid class='set-innerRs' gtr='subgrid' gr='span 2' g='20' bgc='base' bdrs='20' ai='start' setTransition hov='bxsh'>
<Stack tag='a' isLinkBox href='#' g='30' setHov p='20'>
<Frame tag='figure' ar='16/9' pos='rel' bdrs='inner'>
<Media src='https://cdn.lism-css.com/img/random-2510?r=5' alt='' 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='i' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g='30'>
<HTML.p class='u-trim' fz='m' fw='bold'>音楽をアートのように空間に飾るオーディオ</HTML.p>
<Stack class='u-trimItems' tag='dl' g='15' fz='s' o='-20'>
<Flex g='5'><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g='5'><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
</Stack>
</Stack>
<Cluster g='15' px='20' pb='20'>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>デザイン</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>ブランディング</Button>
</Cluster>
</Grid>
<Grid class='set-innerRs' gtr='subgrid' gr='span 2' g='20' bgc='base' bdrs='20' ai='start' setTransition hov='bxsh'>
<Stack tag='a' isLinkBox href='#' g='30' setHov p='20'>
<Frame tag='figure' ar='16/9' pos='rel' bdrs='inner'>
<Media src='https://cdn.lism-css.com/img/random-2510?r=6' alt='' 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='i' fw='light' lts='l' px='20' py='10'>View More</HTML.span>
</Center>
</Layer>
</Frame>
<Stack g='30'>
<HTML.p class='u-trim' fz='m' fw='bold'>空間をドラマチックに演出</HTML.p>
<Stack class='u-trimItems' tag='dl' g='15' fz='s' o='-20'>
<Flex g='5'><dt>Director:</dt><dd>Takahashi Kenta</dd></Flex>
<Flex g='5'><dt>Designer:</dt><dd>Sato Misaki</dd></Flex>
</Stack>
</Stack>
</Stack>
<Cluster g='15' px='20' pb='20'>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>デザイン</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>動画</Button>
<Button href='####' bgc='base-2' c='text' fz='s' px='15' py='5' bdrs='99'>音楽</Button>
</Cluster>
</Grid>
</Grid>
</Stack>
</Container>
</DemoLayout> style.css