Works
Works002
実績用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, AutoColumns, Grid, Media, Flex, Layer, Center, Cluster, Text, Inline, Heading } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---
<DemoLayout title="Works002">
<Container isWrapper="l" py="50" bgc="base-2" hasGutter>
<Stack g="40">
<Stack ai="center" g="30">
<Heading level="2" class="u--trim" fz="4xl" fw="light" lts="l">Works</Heading>
<Text class="u--trim" fz="m" o="pp" lts="l">制作実績</Text>
</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>
<AutoColumns cols="20rem" g="30">
<Grid class="set--var:bdrsInner" gtr="subgrid" gr="span 2" g="20" bgc="base" bdrs="20" ai="start" hasTransition hov="-bxsh">
<Stack as="a" isBoxLink href="#" g="30" set="var:hov" p="20">
<Frame as="figure" ar="16/9" pos="relative" bdrs="inner">
<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="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30">
<Text class="u--trim" fz="m" fw="bold">毎日の料理を心躍る体験に</Text>
<Stack class="u--trimAll" as="dl" g="15" fz="s" o="pp">
<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--var:bdrsInner" gtr="subgrid" gr="span 2" g="20" bgc="base" bdrs="20" ai="start" hasTransition hov="-bxsh">
<Stack as="a" isBoxLink href="#" g="30" set="var:hov" p="20">
<Frame as="figure" ar="16/9" pos="relative" bdrs="inner">
<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="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30">
<Text class="u--trim" fz="m" fw="bold">日々の暮らしの質を高めるアイテム</Text>
<Stack class="u--trimAll" as="dl" g="15" fz="s" o="pp">
<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--var:bdrsInner" gtr="subgrid" gr="span 2" g="20" bgc="base" bdrs="20" ai="start" hasTransition hov="-bxsh">
<Stack as="a" isBoxLink href="#" g="30" set="var:hov" p="20">
<Frame as="figure" ar="16/9" pos="relative" bdrs="inner">
<Media src="https://cdn.lism-css.com/random/img?r=3" 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="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30">
<Text class="u--trim" fz="m" fw="bold">オブジェのような佇まい</Text>
<Stack class="u--trimAll" as="dl" g="15" fz="s" o="pp">
<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--var:bdrsInner" gtr="subgrid" gr="span 2" g="20" bgc="base" bdrs="20" ai="start" hasTransition hov="-bxsh">
<Stack as="a" isBoxLink href="#" g="30" set="var:hov" p="20">
<Frame as="figure" ar="16/9" pos="relative" bdrs="inner">
<Media src="https://cdn.lism-css.com/random/img?r=4" 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="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30">
<Text class="u--trim" fz="m" fw="bold">静かでクリーンなデザイン</Text>
<Stack class="u--trimAll" as="dl" g="15" fz="s" o="pp">
<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--var:bdrsInner" gtr="subgrid" gr="span 2" g="20" bgc="base" bdrs="20" ai="start" hasTransition hov="-bxsh">
<Stack as="a" isBoxLink href="#" g="30" set="var:hov" p="20">
<Frame as="figure" ar="16/9" pos="relative" bdrs="inner">
<Media src="https://cdn.lism-css.com/random/img?r=5" 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="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30">
<Text class="u--trim" fz="m" fw="bold">音楽をアートのように空間に飾るオーディオ</Text>
<Stack class="u--trimAll" as="dl" g="15" fz="s" o="pp">
<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--var:bdrsInner" gtr="subgrid" gr="span 2" g="20" bgc="base" bdrs="20" ai="start" hasTransition hov="-bxsh">
<Stack as="a" isBoxLink href="#" g="30" set="var:hov" p="20">
<Frame as="figure" ar="16/9" pos="relative" bdrs="inner">
<Media src="https://cdn.lism-css.com/random/img?r=6" 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="xl" fs="i" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
</Frame>
<Stack g="30">
<Text class="u--trim" fz="m" fw="bold">空間をドラマチックに演出</Text>
<Stack class="u--trimAll" as="dl" g="15" fz="s" o="pp">
<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>
</AutoColumns>
</Stack>
</Container>
</DemoLayout> style.css