Text component

The Koval UI Text component is a kitchen-sink container designed to style various HTMLElements, including paragraphs, headers, lists, and other inline elements. This ensures a uniform look and feel across different types of content.

Features

• Universal styling: Apply consistent styles to a wide range of HTML elements.
• CMS/WYSIWYG integration: Ideal for formatting content generated by CMS or WYSIWYG editors, eliminating the need for individual component styling.

Import

import {Text} from 'koval-ui';

Component demo

Info

All inline element styles are available as separate components.

Result

Loading...

Live Editor

//import {Text} from 'koval-ui';

function Example(props) {
  return (
    <Text>
      <h1>Header 1</h1>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. This
        text is <a href="#">long url example</a>. Lorem Ipsum has been the industry&apos;s
        standard dummy text ever since the 1500s, when an unknown printer took a galley of
        type and scrambled it to make a type specimen book.
      </p>
      <p>
        This text is <a href="#">url</a>
        <br />
        <b>This text is bold</b>
        <br />
        <strong>This text is strong</strong>
        <br />
        <i>This text is italic</i>
        <br />
        <em>This text is emphasized</em>
        <br />
        <mark>This text is marked</mark>
        <br />
        <small>This text is smaller</small>
        <br />
        This is <s>strikethrough text</s>
        <br />
        <del>This text is deleted</del>
        <br />
        <ins>This text is inserted</ins>
        <br />
        This is <sub>subscript</sub> and <sup>superscript</sup>
        <br />
        This is <kbd>Shift</kbd> and <kbd>Ctrl</kbd>
        <br />
        This is <code>alert(&lsquo;Hello world&rsquo;)</code> example
        <br />
      </p>
      <ul>
        <li>Unordered item 1</li>
        <li>Unordered item 2</li>
        <li>Unordered item 3</li>
      </ul>
      <ol>
        <li>Ordered item 1</li>
        <li>Ordered item 2</li>
        <li>Ordered item 3</li>
      </ol>
      <blockquote>
        Words can be like X-rays, if you use them properly—they’ll go through anything.
        You read and you’re pierced.
        <cite>George Clooney</cite>
      </blockquote>
      <dl>
        <dt>Beast of Bodmin</dt>
        <dd>A large feline inhabiting Bodmin Moor.</dd>
        <dt>Morgawr</dt>
        <dd>A sea serpent.</dd>
        <dt>Owlman</dt>
        <dd>A giant owl-like creature.</dd>
      </dl>
      <p>
        This is meter:{' '}
        <meter value={55} min={0} low={30} high={60} max={100} optimum={50}>
          80/100
        </meter>
      </p>
    </Text>
  );
}