Text

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

View Source 

Usage

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

Variants

• default 

Props

• default-props 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

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>

vue

<script setup lang="ts">
    import { UiText } from '@/components/ui/text'
</script>

<template>
    <UiText 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>
    </UiText>
</template>

jsx

import { UiText } from '@/components/ui/text'

export function Example() {
    return (
        <UiText 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>
        </UiText>
    )
}

Headings

<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

<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

<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

<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

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

Iframe

<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>