検索

Member

Member003

メンバー一覧用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。

大きい画面で見る
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Frame, Grid, Media, Stack, HTML } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title='Member003'>
	<Container isWrapper='l' bgc='base' py='50' hasGutter>
		<Stack g='50'>
			<HTML.h lv='2' class='u-trim' fz='4xl' fw='medium' ff='accent' lts='l' ta='center'>Member</HTML.h>
			<Grid gtc='repeat(auto-fit, minmax(10rem, 1fr))' g='40'>
				<Stack g='30'>
					<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=1' width='960' height='640' />
					</Frame>
					<Stack g='20'>
						<HTML.p class='u-trim' fz='m' fw='bold'>鈴木 太郎</HTML.p>
						<HTML.p class='u-trim' fz='xs' o='-10'>代表取締役 / クリエイティブディレクター</HTML.p>
					</Stack>
				</Stack>
				<Stack g='30'>
					<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=2' width='960' height='640' />
					</Frame>
					<Stack g='20'>
						<HTML.p class='u-trim' fz='m' fw='bold'>佐藤 美咲</HTML.p>
						<HTML.p class='u-trim' fz='xs' o='-10'>アートディレクター / UI/UXデザイナー</HTML.p>
					</Stack>
				</Stack>
				<Stack g='30'>
					<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=3' width='960' height='640' />
					</Frame>
					<Stack g='20'>
						<HTML.p class='u-trim' fz='m' fw='bold'>高橋 健太</HTML.p>
						<HTML.p class='u-trim' fz='xs' o='-10'>テクニカルディレクター / リードエンジニア</HTML.p>
					</Stack>
				</Stack>
				<Stack g='30'>
					<Frame tag='figure' ar='1/1' w='stretch' bdrs='10'>
						<Media src='https://cdn.lism-css.com/img/random-2510?category=portrait-v&r=4' width='960' height='640' />
					</Frame>
					<Stack g='20'>
						<HTML.p class='u-trim' fz='m' fw='bold'>田中 雄大</HTML.p>
						<HTML.p class='u-trim' fz='xs' o='-10'>Webディレクター / プロジェクトマネージャー</HTML.p>
					</Stack>
				</Stack>
			</Grid>
		</Stack>
	</Container>
</DemoLayout>
style.css