Member
Member04
メンバー一覧用のパターンです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, Cluster, Grid, TileGrid, Icon, BoxLink, Media, Stack, Text, Heading } from 'lism-css/astro';
---
<DemoLayout title="Member04">
<Container isWrapper="l" bgc="base-2" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="4xl" fw="500" c="gray" ta="center" lts="l">Team</Heading>
<TileGrid cols={['1', null, '2']} g="40">
<Grid gtr="subgrid" gr="span 2" g="30" bgc="base" p="30" bdrs="10">
<Grid gtc="auto 1fr" g="30">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=1" alt="" width="960" height="640" />
</Frame>
<Grid gtc={['auto', '1fr auto']} g="0 30" jc="center">
<Stack g="20" jc="center">
<Text class="u--trim" fz="l" fw="bold">鈴木 太郎</Text>
<Text class="u--trim" fz="xs" o="p">代表取締役 / クリエイティブディレクター</Text>
</Stack>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}
><Icon viewBox="0 0 32 32" fill="currentColor" focusable="false" fz="l"
><path
d="M18.42,13.99L27.88,3h-2.25l-8.21,9.57L10.86,3H3.3l9.93,14.48L3.3,29h2.25l8.69-10.1L21.14,29h7.56 L18.42,13.99L18.42,13.99z M15.35,17.6l-1-1.42L6.31,4.71h3.43l6.44,9.22l1,1.42l8.39,12h-3.43L15.35,17.6L15.35,17.6z"
></path></Icon
></BoxLink
>
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}
><Icon viewBox="0 0 32 32" fill="currentColor" focusable="false" fz="l"
><path
d="M16.01,8.83c-3.95,0-7.17,3.16-7.17,7.17s3.16,7.17,7.17,7.17s7.17-3.16,7.17-7.17S19.96,8.83,16.01,8.83z M16.01,20.62 c-2.55,0-4.62-2.07-4.62-4.62s2.07-4.62,4.62-4.62s4.62,2.07,4.62,4.62S18.56,20.62,16.01,20.62L16.01,20.62z M25.12,8.59 c0,0.97-0.79,1.64-1.64,1.64c-0.97,0-1.64-0.79-1.64-1.64c0-0.85,0.79-1.64,1.64-1.64C24.33,6.95,25.12,7.62,25.12,8.59z M29.86,10.23c-0.12-2.25-0.61-4.19-2.31-5.83c-1.7-1.64-3.65-2.13-5.83-2.31c-2.31-0.06-9.12-0.06-11.49,0.06 C7.99,2.27,6.04,2.76,4.4,4.4s-2.13,3.59-2.31,5.83c-0.12,2.31-0.12,9.18,0,11.49c0.12,2.25,0.61,4.19,2.31,5.83 c1.7,1.64,3.59,2.13,5.83,2.31c2.31,0.12,9.18,0.12,11.49,0c2.25-0.12,4.19-0.61,5.83-2.31c1.64-1.64,2.13-3.59,2.31-5.83 C30.05,19.41,30.05,12.6,29.86,10.23L29.86,10.23z M26.95,24.27c-0.49,1.22-1.4,2.13-2.67,2.67c-1.82,0.67-6.2,0.55-8.26,0.55 s-6.38,0.18-8.26-0.55c-1.22-0.49-2.13-1.4-2.67-2.67C4.4,22.45,4.58,18.07,4.58,16S4.4,9.62,5.19,7.74 c0.43-1.22,1.4-2.13,2.61-2.61c1.82-0.79,6.2-0.55,8.26-0.55s6.38-0.18,8.26,0.55c1.22,0.49,2.13,1.4,2.67,2.67 c0.67,1.82,0.55,6.2,0.55,8.26S27.61,22.39,26.95,24.27z"
></path></Icon
></BoxLink
>
</Cluster>
</Grid>
</Grid>
<Text class="u--trim" fz="s" o="p">
2010年に当社を設立。クリエイティブの力で数々のクライアント課題を解決。
プロジェクト全体の品質に目を配り、チームを力強く牽引する。週末のキャンプが何よりの楽しみ。
</Text>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="base" p="30" bdrs="10">
<Grid gtc="auto 1fr" g="30">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=2" alt="" width="960" height="640" />
</Frame>
<Grid gtc={['auto', '1fr auto']} g="0 30" jc="center">
<Stack g="20" jc="center">
<Text class="u--trim" fz="l" fw="bold">佐藤 美咲</Text>
<Text class="u--trim" fz="xs" o="p">アートディレクター / UI/UXデザイナー</Text>
</Stack>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}
><Icon viewBox="0 0 32 32" fill="currentColor" focusable="false" fz="l"
><path
d="M28.28,13.45c-2.42,0-4.77-0.76-6.75-2.16v9.8c0,4.9-4.01,8.91-8.91,8.91s-8.91-4.01-8.91-8.91s4.01-8.91,8.91-8.91c0.38,0,0.83,0,1.21,0.06v4.9c-2.16-0.7-4.45,0.51-5.09,2.67c-0.64,2.16,0.51,4.45,2.67,5.09c2.16,0.7,4.45-0.51,5.09-2.67c0.13-0.38,0.19-0.83,0.19-1.21V2h4.84c0,0.38,0,0.83,0.13,1.21l0,0c0.32,1.78,1.4,3.37,2.93,4.39c1.08,0.7,2.35,1.08,3.69,1.08C28.28,8.68,28.28,13.45,28.28,13.45z"
></path></Icon
></BoxLink
>
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}
><Icon viewBox="0 0 32 32" fill="currentColor" focusable="false" fz="l"
><path
d="M29.93,9c-0.32-1.26-1.32-2.27-2.58-2.58C25.08,5.79,16,5.79,16,5.79s-9.08,0-11.35,0.57 C3.39,6.67,2.38,7.68,2.07,8.94C1.5,11.27,1.5,16,1.5,16s0,4.73,0.57,7.06c0.32,1.26,1.32,2.21,2.58,2.58 C6.92,26.21,16,26.21,16,26.21s9.08,0,11.35-0.57c1.26-0.32,2.27-1.26,2.58-2.58C30.5,20.73,30.5,16,30.5,16S30.5,11.27,29.93,9z M13.04,20.35v-8.64L20.6,16L13.04,20.35L13.04,20.35z"
></path></Icon
></BoxLink
>
</Cluster>
</Grid>
</Grid>
<Text class="u--trim" fz="s" o="p">
人間の心理や行動に基づいた、直感的で美しいUI/UXデザインを得意とする。
ユーザーにとって本当に価値のある体験とは何かを常に追求し、ビジュアル全体を統括する。
</Text>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="base" p="30" bdrs="10">
<Grid gtc="auto 1fr" g="30">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=3" alt="" width="960" height="640" />
</Frame>
<Grid gtc={['auto', '1fr auto']} g="0 30" jc="center">
<Stack g="20" jc="center">
<Text class="u--trim" fz="l" fw="bold">高橋 健太</Text>
<Text class="u--trim" fz="xs" o="p">テクニカルディレクター / リードエンジニア</Text>
</Stack>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}
><Icon viewBox="0 0 32 32" fill="currentColor" focusable="false" fz="l"
><path
d="M18.42,13.99L27.88,3h-2.25l-8.21,9.57L10.86,3H3.3l9.93,14.48L3.3,29h2.25l8.69-10.1L21.14,29h7.56 L18.42,13.99L18.42,13.99z M15.35,17.6l-1-1.42L6.31,4.71h3.43l6.44,9.22l1,1.42l8.39,12h-3.43L15.35,17.6L15.35,17.6z"
></path></Icon
></BoxLink
>
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}
><Icon viewBox="0 0 32 32" fill="currentColor" focusable="false" fz="l"
><path
d="M15.73,2.32C7.93,2.32,2,8.25,2,16.05c0,6.17,3.93,11.55,9.49,13.43c0.67,0.12,0.97-0.3,0.97-0.67s0-2.3,0-3.39c0,0-3.93,0.85-4.72-1.63c0,0-0.6-1.63-1.57-2c0,0-1.27-0.91,0.06-0.91c0,0,1.39,0.12,2.18,1.45c1.21,2.18,3.27,1.51,4.11,1.21c0.12-0.91,0.48-1.51,0.91-1.87c-3.14-0.3-6.35-0.85-6.35-6.17c0-1.51,0.42-2.36,1.33-3.27c-0.12-0.36-0.6-1.87,0.12-3.81c1.21-0.36,3.87,1.51,3.87,1.51c1.15-0.3,2.36-0.48,3.57-0.48s2.42,0.18,3.57,0.48c0,0,2.72-1.87,3.87-1.51c0.79,1.94,0.3,3.39,0.12,3.81c0.91,1.03,1.45,1.75,1.45,3.27c0,5.44-3.27,5.81-6.47,6.17c0.48,0.42,0.97,1.27,0.97,2.6c0,1.87,0,4.23,0,4.66c0,0.36,0.24,0.85,0.97,0.73C26.19,27.78,30,22.4,30,16.17C29.82,8.25,23.47,2.32,15.73,2.32z"
></path></Icon
></BoxLink
>
</Cluster>
</Grid>
</Grid>
<Text class="u--trim" fz="s" o="p">
最新のWeb技術に対する探究心が武器。困難な要件でも、最適な技術選定と実装でプロジェクトを成功に導く。
後輩の育成にも情熱を注ぐ、頼れる技術リーダー。
</Text>
</Grid>
<Grid gtr="subgrid" gr="span 2" g="30" bgc="base" p="30" bdrs="10">
<Grid gtc="auto 1fr" g="30">
<Frame as="figure" ar="1/1" w="stretch" max-w="8rem" bdrs="10">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=4" alt="" width="960" height="640" />
</Frame>
<Grid gtc={['auto', '1fr auto']} g="0 30" jc="center">
<Stack g="20" jc="center">
<Text class="u--trim" fz="l" fw="bold">田中 雄大</Text>
<Text class="u--trim" fz="xs" o="p">Webディレクター / プロジェクトマネージャー</Text>
</Stack>
<Cluster g="20">
<BoxLink href="#" c="text" o="pp" hov={{ o: 'inherit' }}
><Icon viewBox="0 0 32 32" fill="currentColor" focusable="false" fz="l"
><path
d="M18.42,13.99L27.88,3h-2.25l-8.21,9.57L10.86,3H3.3l9.93,14.48L3.3,29h2.25l8.69-10.1L21.14,29h7.56 L18.42,13.99L18.42,13.99z M15.35,17.6l-1-1.42L6.31,4.71h3.43l6.44,9.22l1,1.42l8.39,12h-3.43L15.35,17.6L15.35,17.6z"
></path></Icon
></BoxLink
>
</Cluster>
</Grid>
</Grid>
<Text class="u--trim" fz="s" o="p">
クライアントと制作チームの架け橋となり、プロジェクトを円滑に進行させる司令塔。
丁寧なコミュニケーションと緻密なスケジュール管理で、お客様からの信頼も厚い。
</Text>
</Grid>
</TileGrid>
</Stack>
</Container>
</DemoLayout>