EvoKit - Text

Used for text. Contains one element <Text>

Install

Peer dependencies evokit. More about install

npm install evokit-text --save

Usage

More about usage

import React from 'react';
import { Text } from 'evokit-text';
import 'evokit-text/style.css';

const App = () => (
    <Text text-align='center'>
        ...
    </Text>
);

Props

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

<Text />

| Prop name | Default value | Possible value | Description | |------------------|---------------|------------------|-------------| | text-align | left | left center right justify | Horizontal alignment | | text-color | null | Create theme | Text color | | text-display | inline | block inline-block inline none | Display type | | text-lheight | default | default medium large | Line spacing | | text-size | default | none inherit default small big h1 h2 h3 h4 h5 h6 | Font size | | text-style | null | italic strike underline overline | Text style | | text-transform | none | none capitalize lowercase uppercase | Text case conversion | | text-valign | null | baseline bottom middle sub super text-bottom text-top top | Vertical alignment | | text-weight | default | default thin light medium bold black 100 200 300 400 500 600 700 800 900 | Font weight | | text-wrap | normal | normal nowrap pre pre-wrap pre-line break ellipsis three-line two-line | Transferring and cutting text |

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-text-media-small only screen and (min-width: 480px);
@custom-media --ek-text-media-medium only screen and (min-width: 768px);
@custom-media --ek-text-media-large only screen and (min-width: 960px);
@custom-media --ek-text-media-wide only screen and (min-width: 1200px);
@custom-media --ek-text-media-huge only screen and (min-width: 1400px);

:root {
    /* base */
    --ek-text-line-height: 1em;
    /* prop 'text-size' */
    --ek-text-size-small: 11px;
    --ek-text-size-default: 13px;
    --ek-text-size-big: 15px;
    --ek-text-size-h1: 24px;
    --ek-text-size-h2: 22px;
    --ek-text-size-h3: 20px;
    --ek-text-size-h4: 18px;
    --ek-text-size-h5: 16px;
    --ek-text-size-h6: 14px;
    /* prop 'text-lheight' */
    --ek-text-line-height-default: var(--ek-text-line-height);
    --ek-text-line-height-medium: 1.25em;
    --ek-text-line-height-large: 1.5em;
}

Live demo

text-display

• block - shown as blocky
• inline-block - block element that is wrapped around by other elements
• inline - displayed as inline
• none - remove from a document

<Text text-display='none'>
    ...
</Text>

text-size

• none - value: 0px
• inherit - inherits the meaning of the parent
• small - css variable --ek-text-size-small, default value: 11px
• default - css variable --ek-text-size-default, default value: 13px
• big - css variable --ek-text-size-big, default value: 15px
• h1 - css variable --ek-text-size-h1, default value: 24px
• h2 - css variable --ek-text-size-h2, default value: 22px
• h3 - css variable --ek-text-size-h3, default value: 20px
• h4 - css variable --ek-text-size-h4, default value: 18px
• h5 - css variable --ek-text-size-h5, default value: 16px
• h6 - css variable --ek-text-size-h6, default value: 14px

<Text text-size='big'>
    ...
</Text>

text-weight

• default - value: 400
• thin - value: 100
• light - value: 300
• medium - value: 500
• bold - value: 700
• black - value: 900

or

• 100 200 300 400 500 600 700 800 900

<Text text-weight='bold'>
    ...
</Text>

text-align

• left - Align text to the left
• center - Center alignment of text
• right - Align text to the right
• justify - Distributes all text evenly across width

<Text text-align='...'></Text>

text-valign

• top - Align the top edge of the element to the top of the tallest line item.
• bottom - Aligns the base of the current element at the bottom of the element of the line below it all
• middle - The alignment of the midpoint of the element at the baseline of the parent plus half the height of the parent element
• baseline - Aligns the baseline of the current element to the parent's baseline
• sub - The element is depicted as subscript, in the form of a subscript
• super - The element is depicted as superscript, in the form of a superscript
• text-top - The top border of the element is aligned to the highest text element of the current line
• text-bottom - The bottom border of the element is aligned at the very bottom edge of the current line

<Text text-valign='baseline'>
    ...
</Text>

text-wrap

• normal - The text is displayed as usual
• nowrap - All text is displayed in one line
• pre - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
• pre-wrap - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
• pre-line - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
• break - Line wrapping is added automatically
• ellipsis - The text is cut and an ellipsis is added to the end of the line
• two-line - Text is cut in two lines
• three-line - Text is cut in three lines

<Text text-wrap='ellipsis'>
    ...
</Text>

text-style

• italic - Cursive text
• strike - Creates strikethrough text
• underline - Sets underlined text
• overline - The line runs over the text

<Text text-style='strike'>
    ...
</Text>

text-transform

• none - Does not change the case of characters
• capitalize - The first character of each word in the sentence will be capitalized
• lowercase - All text characters are lowercase (lower case)
• uppercase - All text characters become uppercase (upper case)

<Text text-transform='uppercase'>
    ...
</Text>

text-lheight

• default - css variable --ek-text-line-height-default, default value: 1em
• medium - css variable --ek-text-line-height-medium, default value: 1.25em
• large - css variable --ek-text-line-height-large, default value: 1.5em

<Text text-lheight='large'>
    ...
</Text>

text-color

Set the THEME_NAME depending on the theming

<Text text-color={THEME_NAME}>
    ...
</Text>