検索

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' hasGutter>
		<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 tag='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