Lism CSS
Search

ShapeDivider

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

A component that renders a decorative border using SVG.

↓
Preview

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.

Resize

Usage

Provided as ShapeDivider (c--shapeDivider) from the @lism-css/ui package.

Import

import { ShapeDivider } from '@lism-css/ui/react';

Props

PropertyDescription
viewBoxThe viewBox attribute for the output SVG.
levelSpecifies the height level of the shape as a positive number. Default is 5.
offsetOutputs a variable to shift the shape horizontally.
stretchOutputs a variable to stretch the shape horizontally.
isEmptyRenders no shape, allowing the component to be used as a spacer.
isAnimationEnables animation. Outputs data-has-animation="true".

Source Code

The source code is available on GitHub.

Examples

Placing shapes at the top and bottom of a section

Use flip to mirror the shape, allowing you to reuse the same SVG path for both the top and bottom dividers. (Separate paths can be provided instead if preferred.)

↓
Preview

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.

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.

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.

Resize 
<Wrapper hasGutter py="40">
  <DummyText />
</Wrapper>
<ShapeDivider viewBox="0 0 10 10" level="4">
  <path d="M10,10V0L0,9.5V10L10,10z"></path>
</ShapeDivider>
<Wrapper hasGutter bgc="text" c="base">
  <Box py="40">
    <DummyText length="l" />
  </Box>
</Wrapper>
<ShapeDivider viewBox="0 0 10 10" level="4" flip="XY">
  <path d="M10,10V0L0,9.5V10L10,10z"></path>
</ShapeDivider>
<Wrapper hasGutter py="40">
  <DummyText />
</Wrapper>

Using an empty ShapeDivider as a spacer

You can use the component as a spacer by omitting the path and specifying isEmpty.

Even when empty, level still controls the height, making it useful for managing spacing on the side opposite a shape divider.

↓
Preview

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.

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 
<Wrapper hasGutter bgc="base">
  <ShapeDivider isEmpty level="5" />
  <Box py="20">
    <DummyText length="l" />
  </Box>
  <ShapeDivider viewBox="0 0 10 10" level="5" >
    <path d="M10,10V0L0,9.5V10L10,10z"></path>
  </ShapeDivider>
</Wrapper>
<Wrapper hasGutter bgc="text" c="base">
  <Box py="40">
    <DummyText length="l" />
  </Box>
</Wrapper>

Enabling animation

An example with animation enabled using isAnimation.

↓
Preview

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.

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 
<Container pos="relative">
  <ShapeDivider isEmpty level="7" />
  <Frame isLayer z="-1" max-w="100%">
    <Media src="https://cdn.lism-css.com/img/a-1.jpg" alt="" width="960" height="640" />
    <Layer bgc="black:50%" />
  </Frame>
  <Wrapper contentSize="s" hasGutter py="40" c="white">
    <DummyText length="xl" />
  </Wrapper>
  <ShapeDivider viewBox="0 0 100 10" isAnimation c="base" level="7">
    <path opacity=".3" d="M100,5.5C91.5,3,79.5,7.5,71.5,8C58,9,49,0.5,36,2c-9,1-13.5,3.5-20.5,3.5C8.5,6,0,2,0,2v8h100V5.5z"></path>
    <path opacity=".3" d="M100,1.5C87.8,6.6,79.3,2.1,67.8,2.6S53,6.5,42.5,5.5S23,0,15,0S1,3,0,4v6h100V1.5z"></path>
    <path d="M100,7.5C91.5,5,77.1,11.8,54,8C34.6,4.8,14.4,4.1,0,8.5V10h100V7.5z"></path>
  </ShapeDivider>
</Container>
<Container isWrapper="s" hasGutter bgc="base" py="40">
  <DummyText length="l" />
</Container>

Adjusting position with stretch and offset

When reusing the same shape at both the top and bottom, simply flipping it may look slightly off. In such cases, using stretch and offset to shift the SVG can produce a more natural result with the same shape.

↓
Using stretch and offset

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.

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. Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

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 
<Container isWrapper="s" hasGutter bgc="base" py="40">
  <ShapeDivider isEmpty level="4" />
  <DummyText length="l" />
</Container>
<Container pos="relative" hasGutter c="base" bgc="text">
  <ShapeDivider viewBox="0 0 100 10" c="base" flip="Y" level="8" stretch="1.1" offset="-5%">
    <path d="M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z"></path>
  </ShapeDivider>
  <Wrapper contentSize="s" py="40">
    <DummyText length="xl" />
  </Wrapper>
  <ShapeDivider viewBox="0 0 100 10" c="base" level="8" stretch="1.1">
    <path d="M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z"></path>
  </ShapeDivider>
</Container>
<Container isWrapper="s" hasGutter bgc="base" py="40">
  <DummyText length="l" />
  <ShapeDivider isEmpty level="4" />
</Container>

© Lism CSS. All rights reserved.

TOC