Hero

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

ヒーローコンテンツの作成例を紹介します。

Examples

↓

例 1

DEMO 01

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ

<Stack isContainer max-sz="full" min-h="50vh" bgc="base-2">
  <Flow isWrapper hasGutter my="auto">
    <Text fw="bold" fz="xl">
      DEMO 01
    </Text>
    <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p>
  </Flow>
</Stack>

ヘッダー・フッター・レイヤー要素を追加

↓

例2: ヘッダー・フッター・レイヤー要素を追加

Header

XXX

DEMO 02

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Footer

リサイズ

<Stack isContainer max-sz="full" min-h="68vh" g="20" c="white" pos="relative">
  <Frame isLayer>
    <Media isLayer src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
    <Layer style={{ backdropFilter: 'blur(4px)' }} bgc="black:50%" />
  </Frame>
  <Flex jc="between" p="20" z="0" g="20">
    <Box>Header</Box>
    <Flex g="20">
      <div>XXX</div>
      <div>XXX</div>
    </Flex>
  </Flex>
  <Flow isWrapper hasGutter my="auto" z="0">
    <Text fw="bold" fz="xl">
      DEMO 02
    </Text>
    <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p>
  </Flow>
  <Center p="15" z="0">
    Footer
  </Center>
</Stack>

`is--layer`, `ShapeDivider` との組み合わせ

以下の例では、オプトインコンポーネントの<ShapeDivider>も使用しています。

↓

With ShapDivide & Layers

ShapeDivider & Layers

リサイズ

<Stack isContainer max-sz="full" hasGutter pos="relative" min-h="50vh" c="white" g="15">
  <ShapeDivider viewBox="0 0 10 10" c="base" level="6" flip="XY" 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 style={{ backdropFilter: 'blur(4px)' }} bgc="black:50%" />
  </Frame>
  <Flow isWrapper py="30" my="auto" z="0">
    <Heading level="2" fw="bold" fz="xl">
      ShapeDivider & Layers
    </Heading>
    <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p>
  </Flow>
  <ShapeDivider viewBox="0 0 10 10" c="base" level="6" z="1">
    <path d="M10,10V0L0,9.5V10L10,10z" />
  </ShapeDivider>
</Stack>

↓

clipPathと組み合わせ、背景に画像があるコンテンツの境界を斜めにつなぐ

ShapeDivider & Layers

ShapeDivider & Layers

リサイズ

<Box max-sz="full" style={{ '--slopeH': 'clamp(2.5rem, 1.25rem + 5cqw, 5rem)' }}>
  <Stack isContainer max-sz="full" hasGutter pos="relative" min-h="50vh" c="white" g="15">
    <ShapeDivider viewBox="0 0 10 10" h="var(--slopeH)" c="base" flip="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 isWrapper py="30" pr={['0', '25%', '33%']} my="auto" z="0">
      <Heading level="2" fw="bold" fz="xl">
        <Fragment>ShapeDivider & Layers</Fragment>
      </Heading>
      <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p>
    </Flow>
    <Spacer h="var(--slopeH)" />
  </Stack>
  <Stack isContainer max-sz="full" hasGutter pos="relative" 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 isWrapper py="30" pl={['0', '25%', '33%']} my="auto" z="0" ta="right">
      <Heading level="2" fw="bold" fz="xl">
        <Fragment>ShapeDivider & Layers</Fragment>
      </Heading>
      <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p>
    </Flow>
    <ShapeDivider viewBox="0 0 10 10" h="var(--slopeH)" c="base" flip="X" z="1">
      <path d="M10,10V0L0,9.5V10L10,10z"></path>
    </ShapeDivider>
  </Stack>
</Box>

別ページで確認する

大きい画面で見る

Hero

Examples

ヘッダー・フッター・レイヤー要素 を追加

is--layer, ShapeDivider との組み合わせ

ShapeDivider & Layers

ShapeDivider & Layers

ShapeDivider & Layers

別ページで確認する

ヘッダー・フッター・レイヤー要素を追加

`is--layer`, `ShapeDivider` との組み合わせ