Lism CSS
検索

Navigation

Navigation005

ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。

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

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

<DemoLayout title="Navigation005">
  <Container isWrapper="l" bgc="base-2" py="50" hasGutter>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="5xl" fw="bold" ff="accent" c="gray">Navigation</Heading>
      <Stack g="40">
        <Grid gtc="repeat(auto-fit, minmax(200px, 1fr))" g="40 50">
          <Grid gtr="subgrid" gr="span 2" g="30">
            <Stack g="15">
              <Text class="u--trim" fz="l" fw="bold">製品情報</Text>
              <Text class="u--trim" fz="xs" o="pp">PRODUCTS</Text>
            </Stack>
            <Stack g="5">
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>キッチン</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>リビング</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>オーディオ</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>ライティング</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>限定モデル</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
            </Stack>
          </Grid>
          <Grid gtr="subgrid" gr="span 2" g="30">
            <Stack g="15">
              <Text class="u--trim" fz="l" fw="bold">企業情報</Text>
              <Text class="u--trim" fz="xs" o="pp">COMPANY</Text>
            </Stack>
            <Stack g="5">
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>会社概要</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>沿革</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>ニュースリリース</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>メディア掲載</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>IR情報</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
            </Stack>
          </Grid>
          <Grid gtr="subgrid" gr="span 2" g="30">
            <Stack g="15">
              <Text class="u--trim" fz="l" fw="bold">ストーリー</Text>
              <Text class="u--trim" fz="xs" o="pp">STORIES</Text>
            </Stack>
            <Stack g="5">
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>デザイナーインタビュー</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>開発秘話</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>ユーザーの声</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>ブログ</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>イベント情報</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
            </Stack>
          </Grid>
          <Grid gtr="subgrid" gr="span 2" g="30">
            <Stack g="15">
              <Text class="u--trim" fz="l" fw="bold">採用情報</Text>
              <Text class="u--trim" fz="xs" o="pp">CAREERS</Text>
            </Stack>
            <Stack g="5">
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>私たちの働き方</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>募集職種一覧</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>新卒採用</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>キャリア採用</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
              <BoxLink href="#" layout="grid" gtc="1fr auto" ai="center" g="20" py="15" hov="-c">
                <Inline>インターンシップ</Inline>
                <Icon icon="caret-right" />
              </BoxLink>
            </Stack>
          </Grid>
        </Grid>
      </Stack>
    </Stack>
  </Container>
</DemoLayout>
style.css