Feature
Feature012
特徴・注目コンテンツ用のパターンです。breakpoint「md」以下は2カラム、「sm」以下は1カラムで表示されます。
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Columns, Grid, Media, Flex, Layer, Center, Text, Inline } from 'lism-css/astro';
---
<DemoLayout title="Feature012">
<Container isWrapper="l" py="50" hasGutter>
<Stack g="40">
<Flex ai="baseline" g="0 30" fxw="wrap">
<h2>カテゴリーから探す</h2>
<Inline fz="m" fw="bold" o="pp">Categories</Inline>
</Flex>
<Columns cols={[1, 2, 3]} g="40" cg="40">
<Grid g="30" as="a" isBoxLink href="#" set="hov">
<Frame as="figure" ar="16/9" bdrs="20" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=1" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
<Flex pos="absolute" t="0" l="0" hl="0" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
<Inline>KITCHEN</Inline>
</Flex>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold">キッチン</Text>
<Text class="u--trim" fz="s">毎日の料理を心躍る体験に。キッチンを美しく彩る、ミニマルなデザインの調理家電。</Text>
</Stack>
</Grid>
<Grid g="30" as="a" isBoxLink href="#" set="hov">
<Frame as="figure" ar="16/9" bdrs="20" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=2" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
<Flex pos="absolute" t="0" l="0" hl="0" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
<Inline>LIVING & AIR</Inline>
</Flex>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold">空調・生活家電</Text>
<Text class="u--trim" fz="s">空間に溶け込み、心地よい空気と時間を作り出す。日々の暮らしの質を高めるアイテム。</Text>
</Stack>
</Grid>
<Grid g="30" as="a" isBoxLink href="#" set="hov">
<Frame as="figure" ar="16/9" bdrs="20" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=3" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
<Flex pos="absolute" t="0" l="0" hl="0" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
<Inline>CLEANING</Inline>
</Flex>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold">掃除機</Text>
<Text class="u--trim" fz="s">掃除さえも、美しい時間に変える。パワフルな吸引力と、オブジェのような佇まい。</Text>
</Stack>
</Grid>
<Grid g="30" as="a" isBoxLink href="#" set="hov">
<Frame as="figure" ar="16/9" bdrs="20" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=4" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
<Flex pos="absolute" t="0" l="0" hl="0" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
<Inline>LAUNDRY</Inline>
</Flex>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold">洗濯機・衣類ケア</Text>
<Text class="u--trim" fz="s">大切な衣類を、優しく、美しく。静かでクリーンなデザインが、空間を洗練させます。</Text>
</Stack>
</Grid>
<Grid g="30" as="a" isBoxLink href="#" set="hov">
<Frame as="figure" ar="16/9" bdrs="20" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=5" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
<Flex pos="absolute" t="0" l="0" hl="0" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
<Inline>AUDIO</Inline>
</Flex>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold">オーディオ</Text>
<Text class="u--trim" fz="s">心を揺さぶる、クリアで立体的なサウンド。音楽をアートのように空間に飾るオーディオ。</Text>
</Stack>
</Grid>
<Grid g="30" as="a" isBoxLink href="#" set="hov">
<Frame as="figure" ar="16/9" bdrs="20" pos="relative">
<Media src="https://cdn.lism-css.com/random/img?r=6" alt="" width="960" height="640" />
<Layer hasTransition hov="in:show" bgc="rgb(0 0 0 / 30%)" style={{ backdropFilter: 'blur(4px)' }}>
<Center h="100%" c="white">
<Inline fz="xl" fs="italic" fw="light" lts="l" px="20" py="10">View More</Inline>
</Center>
</Layer>
<Flex pos="absolute" t="0" l="0" hl="0" fz="xs" c="white" bgc="black" p="0.625em .875em" m="20" bdrs="99">
<Inline>LIGHTING</Inline>
</Flex>
</Frame>
<Stack g="20">
<Text class="u--trim" fz="l" fw="bold">照明</Text>
<Text class="u--trim" fz="s">光と影を操り、空間をドラマチックに演出。シーンに合わせて、心地よい光をデザイン。</Text>
</Stack>
</Grid>
</Columns>
</Stack>
</Container>
</DemoLayout>