Member
Member01
A team member list pattern. Items have a minimum width set, and the number of columns changes according to the container width.
en.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Frame, AutoColumns, Media, Stack, Text, Heading } from 'lism-css/astro';
---
<DemoLayout title="Member01">
<Container isWrapper="m" bgc="base" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">Staff</Heading>
<AutoColumns cols="10rem" g={['40', '50']}>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=1" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Taro Suzuki</Text>
<Text class="u--trim" fz="xs" o="p">CEO / Creative Director</Text>
</Stack>
</Stack>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=2" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Misaki Sato</Text>
<Text class="u--trim" fz="xs" o="p">Art Director / UI/UX Designer</Text>
</Stack>
</Stack>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=3" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Kenta Takahashi</Text>
<Text class="u--trim" fz="xs" o="p">Technical Director / Lead Engineer</Text>
</Stack>
</Stack>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=4" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Yudai Tanaka</Text>
<Text class="u--trim" fz="xs" o="p">Web Director / Project Manager</Text>
</Stack>
</Stack>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=5" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Saori Ito</Text>
<Text class="u--trim" fz="xs" o="p">Web Designer</Text>
</Stack>
</Stack>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=6" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Takuya Watanabe</Text>
<Text class="u--trim" fz="xs" o="p">Front-end Engineer</Text>
</Stack>
</Stack>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=7" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Daisuke Yamamoto</Text>
<Text class="u--trim" fz="xs" o="p">Back-end Engineer</Text>
</Stack>
</Stack>
<Stack g="30" ai="center">
<Frame as="figure" ar="1/1" w="stretch" max-w="150px" bdrs="99">
<Media src="https://cdn.lism-css.com/random/img?category=avatar&r=8" alt="" width="960" height="640" />
</Frame>
<Stack g="20" ai="center">
<Text class="u--trim" fz="m" fw="bold">Makoto Kobayashi</Text>
<Text class="u--trim" fz="xs" o="p">Account Executive / Sales</Text>
</Stack>
</Stack>
</AutoColumns>
</Stack>
</Container>
</DemoLayout>