Lism CSS
検索

Information

Information003

情報用のテンプレートです。breakpoint「md」以下は1カラムになり、アイテムが縦に並びます。内容は全てダミーコンテンツです。

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

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

<DemoLayout title="Information003">
  <Container isWrapper="m" bgc="base" py="50" hasGutter>
    <Stack g="20" ai="center" mb="40">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold">店舗一覧</Heading>
      <Text class="u--trim" fz="s" ta="center" o="pp">Shop List</Text>
    </Stack>
    <Stack>
      <Grid gtc={['auto', null, 'minmax(auto, 300px) 1fr']} g="40" py="40" bd-y-e>
        <Frame as="figure" ar="4/3" bdrs="10">
          <Media src="https://cdn.lism-css.com/random/img?category=room&r=1" alt="" width="960" height="640" />
        </Frame>
        <Stack g="20">
          <Text class="u--trim" fz="l" fw="bold" lts="l">東京本店</Text>
          <Stack fz="s" g="0">
            <p>〒150-0001 東京都渋谷区神宮前1-1-1-1</p>
            <p>TEL: 03-1234-5678</p>
            <p>営業時間: 10:00 - 20:00</p>
            <p>定休日: 水曜日</p>
          </Stack>
          <Flex jc="fe" my-s="auto" g="20">
            <Button href="#" fz="s" bdrs="10">
              <Inline gc="1">Web Site</Inline>
            </Button>
            <Button variant="outline" href="#" fz="s" bdrs="10">Google Map</Button>
          </Flex>
        </Stack>
      </Grid>
      <Grid gtc={['auto', null, 'minmax(auto, 300px) 1fr']} g="40" py="40" bd-y-e>
        <Frame as="figure" ar="4/3" bdrs="10">
          <Media src="https://cdn.lism-css.com/random/img?category=room&r=2" alt="" width="960" height="640" />
        </Frame>
        <Stack g="20">
          <Text class="u--trim" fz="l" fw="bold" lts="l">大阪支店</Text>
          <Stack fz="s">
            <p>〒530-0001 大阪府大阪市北区梅田1-1-1-1</p>
            <p>TEL: 06-1234-5678</p>
            <p>営業時間: 10:00 - 20:00</p>
            <p>定休日: 水曜日</p>
          </Stack>
          <Flex jc="fe" my-s="auto" g="20">
            <Button href="#" fz="s" bdrs="10">
              <Inline gc="1">Web Site</Inline>
            </Button>
            <Button variant="outline" href="#" fz="s" bdrs="10">Google Map</Button>
          </Flex>
        </Stack>
      </Grid>
      <Grid gtc={['auto', null, 'minmax(auto, 300px) 1fr']} g="40" py="40" bd-y-e>
        <Frame as="figure" ar="4/3" bdrs="10">
          <Media src="https://cdn.lism-css.com/random/img?category=room&r=3" alt="" width="960" height="640" />
        </Frame>
        <Stack g="20">
          <Text class="u--trim" fz="l" fw="bold" lts="l">福岡支店</Text>
          <Stack fz="s">
            <p>〒810-0001 福岡県福岡市中央区天神1-1-1-1</p>
            <p>TEL: 092-1234-5678</p>
            <p>営業時間: 10:00 - 20:00</p>
            <p>定休日: 水曜日</p>
          </Stack>
          <Flex jc="fe" my-s="auto" g="20">
            <Button variant="outline" href="#" fz="s" bdrs="10">Google Map</Button>
          </Flex>
        </Stack>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>
style.css