検索

Section

Section014

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

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

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