Lism CSS
検索

Section

Section009-2

セクション用のテンプレートです。breakpoint「md」以下は1カラムで表示され、アイテムが縦に並びます。

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

import { Stack, Container, Frame, Grid, Media, Flex, Icon, Text, Inline, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Section009-2">
  <Container isWrapper="l" py="50" hasGutter>
    <Stack g="50">
      <Grid gtc={['auto', null, '1fr 1fr']}>
        <Stack g="50" jc="center" p={['40', null, '50']}>
          <Stack as="hgroup" g="30" ai="flex-start" jc="center">
            <Text class="u--trim" fz="4rem" fw="100" fs="i" lts="l">Feature</Text>
            <Heading level="2" class="u--trim" fz="xl" fw="bold" lts="l">目指す社会は、その先に</Heading>
          </Stack>
          <Text fz="m" lh="l">
            私たちのサービスは、持続可能な未来を目指し、環境への配慮と社会的責任を重視しています。<br />
            地域社会との連携を深め、多様な価値観を尊重することで、共に成長できるコミュニティを築いています。 革新的な技術とデザインを活用し、ユーザー体験の向上に努めるとともに、
            透明性の高い情報発信を行い、信頼関係の構築に努めています。 これからも、持続可能な発展と社会貢献を両立させるための取り組みを続けてまいります。
          </Text>
          <Flex jc="flex-end">
            <Flex as="a" isBoxLink href="#" ai="center" g="15" hasTransition hov="-c">
              <Inline fz="l" fs="i">View More</Inline>
              <Icon icon="arrow-right" />
            </Flex>
          </Flex>
        </Stack>
        <Frame as="figure" gr={[null, null, '1']} gc={['1', null, '1']} bdrs="10">
          <Media src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" />
        </Frame>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>
style.css