Member
Member005
A team member list template. Items have a minimum width set, and the number of columns changes according to the container width.
↓
Code
en.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">Taro Suzuki</Text>
<Text class="u--trim" fz="xs" o="p">CEO / Creative Director</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
Founded the company in 2010. Solving numerous client challenges through the power of creativity. He oversees the quality of entire
projects and leads the team with strength. Weekend camping is his greatest joy.
</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">Misaki Sato</Text>
<Text class="u--trim" fz="xs" o="p">Art Director / UI/UX Designer</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
Specializes in intuitive and beautiful UI/UX design based on human psychology and behavior. She constantly pursues what truly valuable
experiences mean for users, overseeing the entire visual direction.
</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">Kenta Takahashi</Text>
<Text class="u--trim" fz="xs" o="p">Technical Director / Lead Engineer</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
His passion for the latest web technologies is his greatest weapon. Even with challenging requirements, he leads projects to success
through optimal technology selection and implementation. A reliable tech leader who is also passionate about mentoring junior members.
</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">Yudai Tanaka</Text>
<Text class="u--trim" fz="xs" o="p">Web Director / Project Manager</Text>
</Stack>
<Text class="u--trim" fz="xs" o="pp">
The bridge between clients and the production team, he is the commander who keeps projects running smoothly. With careful communication
and precise schedule management, he has earned strong trust from clients.
</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