Lism CSS
検索

Section

Section015-2

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

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

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

<DemoLayout title="Section015-2">
  <Container>
    <Stack g="50">
      <Grid gtc={['auto', null, '1fr 1fr']}>
        <Stack g="40" jc="center" bgc="base-2" p={['50 40', null, '50']} min-h="50svw">
          <Stack as="hgroup" g="30" ai="fs" jc="center">
            <Heading level="2" class="u--trim" fz="4rem" fw="100" lts="l">Product</Heading>
            <Text class="u--trim" fz="l" fw="bold" lts="l">いつもの朝が、特別な朝に</Text>
          </Stack>
          <Text fz="m" lh="l">
            完璧な一枚のトーストが、忙しい朝を、心豊かな時間に変えてくれます。
            独自のスチームテクノロジーと秒単位の温度制御で、パンの種類に合わせた最高の焼き加減を実現。
            外はさっくり、中はもっちりとした、誰もが感動する究極の食感を生み出します。
            パン本来のおいしさを最大限に引き出す、毎朝の小さな贅沢をお楽しみください。
          </Text>
          <Flex>
            <Button href="#" jc="center" p="15" bdrs="10" min-w="10rem">View More</Button>
          </Flex>
        </Stack>
        <Frame as="figure" gr={[null, null, '1']} gc={['1', null, '1']}>
          <Media src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" />
        </Frame>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>
style.css