Section
Section010
セクション用のテンプレートです。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Box, Stack, Container, Frame, Layer, Media, HTML } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Section010">
<Container isWrapper="m" py="50" setGutter>
<Stack g="30">
<Frame as="figure" ar="16/9" pos="rel">
<Media src="https://cdn.lism-css.com/img/random-2510" alt="" width="960" height="640" />
<Layer p="40 0">
<Stack jc="center" ai="flex-s" min-h="100%" g="20">
<Box bgc="white" p="20 30">
<HTML.h lv="2" class="u--trim" fz="min(4.5vw, 1.75rem)" fw="bold" ff="accent" lts="l">四季の美しさを感じる</HTML.h>
</Box>
</Stack>
<Box as="figcaption" p="20" pos="abs" b="0" r="0">
<HTML.span class="u--trim" fz="s" c="white" ff="accent" lts="l">Feel the beauty of each season</HTML.span>
</Box>
</Layer>
</Frame>
<HTML.p>
自然由来の環境負荷を抑えた製法で、一つひとつ丁寧に手作りしています。
大地の恵みを、あなたの毎日へ。私たちの製品は、自然の力を最大限に活かし、持続可能な未来を目指しています。
季節ごとに変わる風景とともに、心地よい生活をお届けします。
四季折々の美しさを感じながら、豊かな時間を過ごしていただけることを願っています。
</HTML.p>
</Stack>
</Container>
</DemoLayout> style.css