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' hasGutter>
		<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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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' tag='a' isLinkBox href='#' setHov>
					<Frame tag='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