Hero
ヒーローコンテンツの作成例を紹介します。
Examples
Section titled “Examples”DEMO 01
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。
<Stack isFullwide minH='50vh' bgc='base-2'> <Container size='m' hasGutter isFlow my='auto'> <Text fw='bold' fz='xl'>DEMO 01</Text> <Dummy length='l' lang='ja'/> </Container></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 isFullwide minH='70vh' g='30' c='white' pos='r'> <Frame isLayer> <Media isLayer src='/img/img-1.jpg' alt='' width='960' height='640'/> <Layer blur='4px' bgc='black:50%' /> </Frame> <Flex jc='sb' p='30' z='0' g='30'> <Box>Header</Box> <Flex g='30'> <div>XXX</div> <div>XXX</div> </Flex> </Flex> <Container size='m' hasGutter isFlow my='auto' z='0'> <Text fw='bold' fz='xl'>DEMO 02</Text> <Dummy length='l' /> </Container> <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 isFullwide hasGutter pos='r' minH='50vh' c='white' g='20'> <ShapeDivider viewBox='0 0 10 10' c='base' level='6' scale='-Y' offsetY='-0.5px' z='1'> <path d="M10,10V0L0,9.5V10L10,10z"/> </ShapeDivider> <Frame isLayer> <Media isLayer src='/img/img-2.jpg' alt='' width='960' height='640'/> <Layer blur='4px' bgc='black:50%' /> </Frame> <Container size='m' isFlow py='40' my='auto' z='0'> <Text fw='bold' fz='xl'>ShapDivider & Layers</Text> <Dummy length='l' /> </Container> <Box z='0' ta='c'>Footer</Box> <ShapeDivider viewBox='0 0 10 10' c='base' level='6' offsetY='0.5px' 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 isFullwide style={{ '--slopeH': 'clamp(2.5rem, 1.25rem + 5cqw, 5rem)' }}> <Stack isFullwide hasGutter pos='r' minH='50vh' c='white' g='20'> <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' scale='-Y' offsetY='-0.5px' z='1'> <path d='M10,10V0L0,9.5V10L10,10z'></path> </ShapeDivider> <Frame isLayer> <Media isLayer src='/img/img-1.jpg' alt='' width='960' height='640' /> <Layer bgc='black:50%' /> </Frame> <Container size='m' isFlow py='40' pr={['0', '25%', '33%']} my='auto' z='0'> <Text fw='bold' fz='xl'>ShapDivider & Layers</Text> <Dummy length='l' /> </Container> <Spacer h='var(--slopeH)' /> </Stack> <Stack isFullwide hasGutter pos='r' minH='50vh' c='white' mbs='calc(0px - var(--slopeH))'> <Frame isLayer style={{ clipPath: 'polygon(0 var(--slopeH), 0 100%, 100% 100%, 100% 0)', }} > <Media isLayer src='/img/img-3.jpg' alt='' width='960' height='640' /> <Layer bgc='black:50%' /> </Frame> <Spacer h='var(--slopeH)' /> <Container size='m' isFlow py='40' pl={['0', '25%', '33%']} my='auto' z='0'> <Text fw='bold' fz='xl'>ShapDivider & Layers</Text> <Dummy length='l' /> </Container> <ShapeDivider viewBox='0 0 10 10' h='var(--slopeH)' c='base' scale='-X' offsetY='0.5px' z='1'> <path d='M10,10V0L0,9.5V10L10,10z'></path> </ShapeDivider> </Stack></Box>