Lism CSS
検索

Member

Member006

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

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

import { Container, Frame, Cluster, Grid, Icon, LinkBox, Media, Stack, HTML } from 'lism-css/astro';
import './_style.css';
---

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