検索

Section

Section014

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

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

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

<DemoLayout title="Section014">
	<Container isWrapper="l" py="50" setGutter>
		<Grid gtc={['auto', null, 'auto 1fr']} g="40 50">
			<Box>
				<HTML.h lv="2" class="u--trim" fz="3xl" fw="bold" hl="l">最高のユーザー体験を<br />提供する未来のために</HTML.h>
			</Box>
			<Box>
				<HTML.p class="u--trim" fz="m">
					私たちのサービスは、ユーザーの皆様に最高の体験を提供することを目指しています。
					最新の技術を駆使し、使いやすさと安全性を両立させたプラットフォームを構築しました。
					多様なニーズに対応するため、柔軟なカスタマイズオプションも用意しています。
				</HTML.p>
			</Box>
			<Frame as="figure" ar="2/1" gc="1 / -1">
				<Media src="https://cdn.lism-css.com/img/random-2510" alt="" />
			</Frame>
			<Stack gc="1 / -1" jc="flex-e" g="30">
				<p>
					多様なニーズに対応するため、柔軟なカスタマイズオプションも用意しています。
					また、環境への配慮も忘れず、持続可能な未来を見据えた取り組みを進めています。
					ユーザーの皆様が安心して利用できるよう、常に改善と革新を追求し続けます。
					さらに、コミュニティとの連携を強化し、ユーザー同士が交流できる場を提供することで、
					より豊かな体験を創出しています。私たちは、技術と人間性の融合を図り、 未来志向のサービスを展開していくことをお約束します。
				</p>
			</Stack>
		</Grid>
	</Container>
</DemoLayout>
style.css