Skip to content

Text

Typographic defaults for common wysiwyg content. It's an alternative to prose.

View Source 

Usage

css
@import "winduum/ui/text.css" layer(components);

Variants

  • default 

Props

  • default-props 

Examples

Text

html
<div class="ui-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
        metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
        finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
        hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
        lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
        Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
        laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
        Phasellus non pretium libero.</p>
    <p></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Headings

html
<div class="ui-text">
    <h1>h1 heading</h1>
    <h2>h2 heading</h2>
    <h3>h3 heading</h3>
    <h4>h4 heading</h4>
    <h5>h5 heading</h5>
    <h6>h6 heading</h6>
</div>

Lists

html
<div class="ui-text">
    <ul style="max-width: 400px">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ul>
    <p></p>
    <ul style="max-width: 400px; list-style: square">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ul>
    <p></p>
    <ul style="max-width: 400px; list-style: circle">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ul>
    <p></p>
    <ol style="max-width: 400px;">
        <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
            bibendum nisi et dui
        </li>
        <li>Donec eget efficitur metus</li>
    </ol>
    <ol type="1">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="I">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="i">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</div>

Blockquote

html
<div class="ui-text">
    <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est
        tellus sit amet turpis.
    </blockquote>
</div>

Table

html
<div class="ui-text">
    <table>
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

Figure

html
<div class="ui-text">
    <figure>
        <img src="https://bulma.io/images/placeholders/256x256.png">
        <figcaption>
            Figure 1: Some beautiful placeholders
        </figcaption>
    </figure>
</div>

Iframe

html
<div class="ui-text">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen="" width="560" height="315" frameborder="0"></iframe>
</div>

Released under the MIT License.