Lism CSS
Search

Section

Section002

A section template. Below the "md" breakpoint, the layout changes and item arrangement is adjusted.

大きい画面で見る
↓
Code
en.astro 
---
import DemoLayout from '@/layouts/DemoLayout.astro';

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

<DemoLayout title="Section002">
  <Container isWrapper="l" py="50" hasGutter>
    <Grid gtc={['auto', null, '1fr minmax(20rem, 1fr)']} gtr={['1fr', null, '1fr auto auto 1fr']} g="40 60">
      <Stack gr={[' 1', null, '2']} g="40">
        <h2 class="u--trim">Enriching Everyday Life</h2>
        <p class="u--trim">
          My role is to design complex technology so that everyone can use it intuitively and comfortably. Through repeated user interviews and
          testing, I listen thoroughly to the "voice of the user" while pursuing the best possible experience.
        </p>
      </Stack>
      <Columns cols="2" gr={['2', null, '1 / -1']} gc={['1', null, '2']} g="20" min-h="min(70svw, 30rem)">
        <Frame as="figure" gr="1 / -1">
          <Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
        </Frame>
        <Frame as="figure" gr="1 / -1">
          <Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
        </Frame>
      </Columns>
      <Box gr="3">
        <Flex ai="center" g="15">
          <Button href="#" min-w={['100%', null, '150px']} p="15" bdrs="10">View More</Button>
        </Flex>
      </Box>
    </Grid>
  </Container>
</DemoLayout>
style.css