Member
Member003
メンバー一覧用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Grid, Media, Stack, Text, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Member003">
<Container isWrapper="l" bgc="base" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="4xl" fw="500" ff="accent" lts="l" ta="center">Member</Heading>
<Grid gtc="repeat(auto-fit, minmax(10rem, 1fr))" g="40">
<Stack g="30">
<Frame as="figure" ar="2/3" w="stretch" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=staff&r=1" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">鈴木 太郎</Text>
<Text class="u--trim" fz="xs" o="p">代表取締役 / クリエイティブディレクター</Text>
</Stack>
</Stack>
<Stack g="30">
<Frame as="figure" ar="2/3" w="stretch" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=staff&r=2" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">佐藤 美咲</Text>
<Text class="u--trim" fz="xs" o="p">アートディレクター / UI/UXデザイナー</Text>
</Stack>
</Stack>
<Stack g="30">
<Frame as="figure" ar="2/3" w="stretch" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=staff&r=3" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">高橋 健太</Text>
<Text class="u--trim" fz="xs" o="p">テクニカルディレクター / リードエンジニア</Text>
</Stack>
</Stack>
<Stack g="30">
<Frame as="figure" ar="2/3" w="stretch" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=staff&r=4" alt="" width="960" height="640" />
</Frame>
<Stack g="20">
<Text class="u--trim" fz="m" fw="bold">田中 雄大</Text>
<Text class="u--trim" fz="xs" o="p">Webディレクター / プロジェクトマネージャー</Text>
</Stack>
</Stack>
</Grid>
</Stack>
</Container>
</DemoLayout> style.css