Hero
ヒーローコンテンツの作成例を紹介します。
Examples
Section titled “Examples”DEMO 01
ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。
<Stack max-sz='full' min-h='50vh' bgc='base-2'> <Flow isContainer='m' hasGutter my='auto'> <HTML.p fw='bold' fz='xl'>DEMO 01</HTML.p> <Dummy length='l' lang='ja'/> </Flow></Stack>ヘッダー・フッター・レイヤー要素 を追加
Section titled “ヘッダー・フッター・レイヤー要素 を追加”
DEMO 02
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Stack max-sz='full' min-h='70vh' g='30' c='white' pos='rel'> <Frame isLayer> <Media isLayer src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640'/> <Layer blur='4px' bgc='black:50%' /> </Frame> <Flex jc='between' p='30' z='0' g='30'> <Box>Header</Box> <Flex g='30'> <div>XXX</div> <div>XXX</div> </Flex> </Flex> <Flow isContainer='m' hasGutter my='auto' z='0'> <HTML.p fw='bold' fz='xl'>DEMO 02</HTML.p> <Dummy length='l' /> </Flow> <Center p='20' z='0'>Footer</Center></Stack>is--layer, ShapeDivider との組み合わせ
Section titled “is--layer, ShapeDivider との組み合わせ”以下の例では、 オプトインコンポーネントの<ShapeDivider>も使用しています。
ShapDivider & Layers
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Stack max-sz='full' hasGutter pos='rel' min-h='50vh' c='white' g='20'> <ShapeDivider viewBox='0 0 10 10' c='base' level='6' scale='-Y' z='1'> <path d="M10,10V0L0,9.5V10L10,10z"/> </ShapeDivider> <Frame isLayer> <Media isLayer src='https://cdn.lism-css.com/img/a-2.jpg' alt='' width='960' height='640'/> <Layer blur='4px' bgc='black:50%' /> </Frame> <Flow isContainer='m' py='40' my='auto' z='0'> <HTML.p fw='bold' fz='xl'>ShapDivider & Layers</HTML.p> <Dummy length='l' /> </Flow> <Box z='0' ta='center'>Footer</Box> <ShapeDivider viewBox='0 0 10 10' c='base' level='6' z='1'> <path d="M10,10V0L0,9.5V10L10,10z"/> </ShapeDivider></Stack>ShapDivider & Layers
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
ShapDivider & Layers
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
<Box max-sz='full' style={{ '--slopeH': 'clamp(2.5rem, 1.25rem + 5cqw, 5rem)' }}> <Stack max-sz='full' hasGutter pos='rel' min-h='50vh' c='white' g='20'> <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' scale='-Y' z='1'> <path d='M10,10V0L0,9.5V10L10,10z'></path> </ShapeDivider> <Frame isLayer> <Media isLayer src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' /> <Layer bgc='black:50%' /> </Frame> <Flow isContainer='m' py='40' pr={['0', '25%', '33%']} my='auto' z='0'> <HTML.p fw='bold' fz='xl'>ShapDivider & Layers</HTML.p> <Dummy length='l' /> </Flow> <Spacer h='var(--slopeH)' /> </Stack> <Stack max-sz='full' hasGutter pos='rel' min-h='50vh' c='white' my-s='calc(0px - var(--slopeH))'> <Frame isLayer style={{ clipPath: 'polygon(0 var(--slopeH), 0 100%, 100% 100%, 100% 0)', }} > <Media isLayer src='https://cdn.lism-css.com/img/a-3.jpg' alt='' width='960' height='640' /> <Layer bgc='black:50%' /> </Frame> <Spacer h='var(--slopeH)' /> <Flow isContainer='m' py='40' pl={['0', '25%', '33%']} my='auto' z='0'> <HTML.p fw='bold' fz='xl'>ShapDivider & Layers</HTML.p> <Dummy length='l' /> </Flow> <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' scale='-X' z='1'> <path d='M10,10V0L0,9.5V10L10,10z'></path> </ShapeDivider> </Stack></Box>