Member
Member005
メンバー一覧用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Cluster, Grid, Icon, BoxLink, Media, Stack, Text, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Member005">
<Container isWrapper="l" bgc="base-2" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="5xl" fw="bold" ff="accent" fs="i" c="gray" ta="center" lts="l">Fellow</Heading>
<Grid gtc="repeat(auto-fit, minmax(14rem, 1fr))" g="40">
<Grid gtr="subgrid" gr="span 4" ji="center" g="30" bgc="white" p="30" bdrs="10">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=1" alt="" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">鈴木 太郎</Text>
<Text class="u--trim" fz="xs" o="p">代表取締役 / クリエイティブディレクター</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
2010年に当社を設立。クリエイティブの力で数々のクライアント課題を解決。
プロジェクト全体の品質に目を配り、チームを力強く牽引する。週末のキャンプが何よりの楽しみ。
</Text>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
</Cluster>
</Grid>
<Grid gtr="subgrid" gr="span 4" ji="center" g="30" bgc="white" p="30" bdrs="10">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=2" alt="" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">佐藤 美咲</Text>
<Text class="u--trim" fz="xs" o="p">アートディレクター / UI/UXデザイナー</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
人間の心理や行動に基づいた、直感的で美しいUI/UXデザインを得意とする。
ユーザーにとって本当に価値のある体験とは何かを常に追求し、ビジュアル全体を統括する。
</Text>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
</Cluster>
</Grid>
<Grid gtr="subgrid" gr="span 4" ji="center" g="30" bgc="white" p="30" bdrs="10">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=3" alt="" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">高橋 健太</Text>
<Text class="u--trim" fz="xs" o="p">テクニカルディレクター / リードエンジニア</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
最新のWeb技術に対する探究心が武器。困難な要件でも、最適な技術選定と実装でプロジェクトを成功に導く。
後輩の育成にも情熱を注ぐ、頼れる技術リーダー。
</Text>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
</Cluster>
</Grid>
<Grid gtr="subgrid" gr="span 4" ji="center" g="30" bgc="white" p="30" bdrs="10">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=4" alt="" width="960" height="640" />
</Frame>
<Stack w="stretch" g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">田中 雄大</Text>
<Text class="u--trim" fz="xs" o="p">Webディレクター / プロジェクトマネージャー</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
クライアントと制作チームの架け橋となり、プロジェクトを円滑に進行させる司令塔。
丁寧なコミュニケーションと緻密なスケジュール管理で、お客様からの信頼も厚い。
</Text>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-x" fz="m" /></BoxLink>
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}><Icon icon="logo-instagram" fz="m" /></BoxLink>
</Cluster>
</Grid>
</Grid>
</Stack>
</Container>
</DemoLayout> style.css