EvoKit - Line

Horizontal line, used to separate content. Contains one element <Line>

Install

Peer dependencies evokit. More about install

npm install evokit-line --save

Usage

More about usage

import React from 'react';
import { Line } from 'evokit-line';
import 'evokit-line/style.css';

const App = () => (
    <Line line-indent='xl' />
);

Props

Also supports other valid props of the React Element. More about use props

<Line />

| Prop name | Default value | Possible value | Description | |----------------|---------------|----------------|--------------| | line-color | null | Create theme | Border color | | line-display | block | block none | Display type | | line-indent | none | none xxs xs s m l xl xxl | Set the margin top and bottom | | line-style | solid | solid dotted dashed | Border style | | line-tag | hr | HTML tags | HTML tag |

Customize

This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.

@custom-media --ek-line-media-small only screen and (min-width: 480px);
@custom-media --ek-line-media-medium only screen and (min-width: 768px);
@custom-media --ek-line-media-large only screen and (min-width: 960px);
@custom-media --ek-line-media-wide only screen and (min-width: 1200px);
@custom-media --ek-line-media-huge only screen and (min-width: 1400px);

:root {
    /* prop 'line-indent' */
    --ek-line-indent-xxs: 5px;
    --ek-line-indent-xs: 10px;
    --ek-line-indent-s: 15px;
    --ek-line-indent-m: 20px;
    --ek-line-indent-l: 25px;
    --ek-line-indent-xl: 30px;
    --ek-line-indent-xxl: 35px
}

Live demo

line-tag

Default value hr

<Line line-tag='hr' />

line-display

• block - shown as blocky (default)
• none - remove block from document

<Line line-display='block' />

line-indent

• none - no indent, value: 0px (default)
• xxs - css variable --ek-line-indent-xxs, default value: 5px
• xs - css variable --ek-line-indent-xs, default value: 10px
• s - css variable --ek-line-indent-s, default value: 15px
• m - css variable --ek-line-indent-m, default value: 20px
• l - css variable --ek-line-indent-l, default value: 25px
• xl - css variable --ek-line-indent-xl, default value: 30px
• xxl - css variable --ek-line-indent-xxl, default value: 35px

<Line line-indent='l' />

line-style

• solid - solid style (default)
• dotted - dotted style
• dashed - dashed style

<Line line-style='dotted' />

line-color

Set the THEME_NAME depending on the theming

<Line line-color={THEME_NAME} />