Lism CSS
Search

Hero

This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.

Examples of hero sections built with Lism.

Examples

↓
Example 1

DEMO 01

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.

Resize 
<Stack isContainer max-sz="full" min-h="50vh" bgc="base-2">
  <Flow isWrapper hasGutter my="auto">
    <Text fw="bold" fz="xl">
      DEMO 01
    </Text>
    <DummyText length="l" lang="en" />
  </Flow>
</Stack>
↓
Example 2: Adding header, footer, and layer elements
Header
XXX
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
Resize 
<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>
    <DummyText length="l" />
  </Flow>
  <Center p="15" z="0">
    Footer
  </Center>
</Stack>

Combining with is--layer and ShapeDivider

The following example also uses the opt-in component <ShapeDivider>.

↓
With ShapDivide & Layers

ShapDivider & Layers

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.

Resize 
<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="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 style={{ backdropFilter: 'blur(4px)' }} bgc="black:50%" />
  </Frame>
  <Flow isWrapper py="30" my="auto" z="0">
    <Heading level="2" fw="bold" fz="xl">
      ShapDivider & Layers
    </Heading>
    <DummyText length="l" />
  </Flow>
  <ShapeDivider viewBox="0 0 10 10" c="base" level="6" z="1">
    <path d="M10,10V0L0,9.5V10L10,10z" />
  </ShapeDivider>
</Stack>
↓
Using clipPath to create a diagonal transition between sections with background images

ShapDivider & Layers

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.

ShapDivider & Layers

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.

Resize 
<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">
        ShapDivider & Layers
      </Heading>
      <DummyText length="l" />
    </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">
        ShapDivider & Layers
      </Heading>
      <DummyText length="l" />
    </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>

View on a separate page

大きい画面で見る

© Lism CSS. All rights reserved.

TOC