Lism CSS
検索

Feature

Feature012

特徴・注目コンテンツ用のテンプレートです。breakpoint「md」以下は2カラム、「sm」以下は1カラムで表示されます。

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

import { HTML, Stack, Container, Frame, Columns, Grid, Media, Flex, Layer, Center } from 'lism-css/astro';
import './_style.css';
---

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