Section

Section002-2

セクション用のテンプレートです。breakpoint「md」以下はレイアウトが変わり、アイテムの並びが変更されます。

↓

コード

index.astro

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Flex, Frame, Grid, Columns, Box, Media, Stack } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro';
import './_style.css';
---

<DemoLayout title="Section002-2">
	<Container isWrapper="l" py="50" hasGutter>
		<Grid gtc={['auto', null, 'minmax(20rem, 1fr) 1fr']} gtr={['1fr', null, '1fr auto auto 1fr']} g="40 60" }>
			<Stack gr={['1', null, '2']} g="40">
				<h2 class="u-trim">暮らしを、もっと豊かに</h2>
				<p class="u-trim">
					私の役割は複雑なテクノロジーを誰もが直感的に、そして快適に使えるようにデザインすることです。
					ユーザーインタビューやテストを繰り返し、徹底的に「ユーザーの声」に耳を傾けながら、最高の体験を追求しています。
				</p>
			</Stack>
			<Columns cols="2" gr={['2', null, '1 / -1']} gc={['1', null, '1']} g="20" min-h="min(70svw, 30rem)">
				<Frame tag="figure" gr="1 / -1">
					<Media src="https://cdn.lism-css.com/img/random-2510?r=1" alt="" width="960" height="640" />
				</Frame>
				<Frame tag="figure" gr="1 / -1">
					<Media src="https://cdn.lism-css.com/img/random-2510?r=2" alt="" width="960" height="640" />
				</Frame>
			</Columns>
			<Box gr="3">
				<Flex ai="center" g="15">
					<Button href="#" min-w={['100%', null, '150px']} p="15" bdrs="10">View More</Button>
				</Flex>
			</Box>
		</Grid>
	</Container>
</DemoLayout>

style.css