Lism CSS
検索

Member

Member001

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

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

import { Container, Frame, AutoColumns, Media, Stack, Text, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Member001">
  <Container isWrapper="m" bgc="base" py="50" hasGutter>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">スタッフ</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">鈴木 太郎</Text>
            <Text class="u--trim" fz="xs" o="p">代表取締役 / クリエイティブディレクター</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">佐藤 美咲</Text>
            <Text class="u--trim" fz="xs" o="p">アートディレクター / UI/UXデザイナー</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">高橋 健太</Text>
            <Text class="u--trim" fz="xs" o="p">テクニカルディレクター / リードエンジニア</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">田中 雄大</Text>
            <Text class="u--trim" fz="xs" o="p">Webディレクター / プロジェクトマネージャー</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">伊藤 沙織</Text>
            <Text class="u--trim" fz="xs" o="p">Webデザイナー</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">渡辺 拓也</Text>
            <Text class="u--trim" fz="xs" o="p">フロントエンドエンジニア</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">山本 大輔</Text>
            <Text class="u--trim" fz="xs" o="p">バックエンドエンジニア</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">小林 誠</Text>
            <Text class="u--trim" fz="xs" o="p">アカウントエグゼクティブ / 営業</Text>
          </Stack>
        </Stack>
      </AutoColumns>
    </Stack>
  </Container>
</DemoLayout>
style.css