Ui.Content

This component is used to render text like content. It has styles for HTML tags like headings, list, paragraphs and code.

Demo

You can check below how each tag renders.

Heading 1

Heading 2

Heading 3

Heading 4

Lists:

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
<div>Some code!</div>

Link to home...

<Ui.Content>
<h1>"Heading 1"</h1>
<h2>"Heading 2"</h2>
<h3>"Heading 3"</h3>
<h4>"Heading 4"</h4>
<p>"Lists:"</p>
<ul>
<li>"List item 1"</li>
<li>"List item 2"</li>
<li>"List item 3"</li>
<li>"List item 4"</li>
</ul>
<ol>
<li>"List item 1"</li>
<li>"List item 2"</li>
<li>"List item 3"</li>
<li>"List item 4"</li>
</ol>
<pre><code>"<div>Some code!</div>"</code></pre>
<p><a href="/">"Link to home..."</a></p>
</Ui.Content>
Size

The size of the component can be set with the size property.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<>
<Ui.Content size={Ui.Size.Px(12)}>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " \
"eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
</Ui.Content>
<Ui.Content size={Ui.Size.Px(16)}>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " \
"eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
</Ui.Content>
<Ui.Content size={Ui.Size.Px(20)}>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " \
"eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
</Ui.Content>
</>
Text Alignment

The text alignment of the component can be controlled with the textAlign property.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<>
<div style="width: 280px">
<Ui.Content textAlign="left">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " \
"eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
</Ui.Content>
</div>
<div style="width: 280px">
<Ui.Content textAlign="center">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " \
"eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
</Ui.Content>
</div>
<div style="width: 280px">
<Ui.Content textAlign="right">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " \
"eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
</Ui.Content>
</div>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.