# Site

While Typography comprises most of a websites content. There are other forms of content that can be that should be considered when building out the front-end of you site. Stylesora includes some of these additional content elements in it's base styles.

# Links

Musora's link styles closely match paragraph elements. The difference would be the addition of the tw-text-current and visited:tw-text-current. These classes are added to ensure the link itself is not styled by default. So you can use add additional styles without having to override the defaults.

# Examples

Paragraph link with no styles.

Email: example@email.com

Phone: 555-555-5555

New Tab: New Tab

<div class="tw-font-bison-bold tw-uppercase">
    <!-- Link in Paragraph -->
    <p>Paragraph <a href="#" title="this link goes nowhere">link</a> with no styles.</p>
    <!-- Email Link -->
    <p>Email: <a href="@mailto:example@email.com" title="" target="" class="tw-text-drumeo">example@email.com</a> </p>
    <!-- Phone Link -->
    <p>Phone: <a href="tel:555-555-5555" title="Example Phone link" target="" class="tw-text-pianote hover:tw-underline">555-555-5555</a> </p>
    <!-- Open in new tab -->
    <p>New Tab: <a href="/" title="Open this page in new tab" target="_blank" class="tw-text-guitareo tw-font-bold hover:tw-text-green-500">New Tab</a> </p>
</div>

# Lists

Lists are used to display content that share a common theme. Stylesora includes prestyled ordered and unordered lists. By Default, lists are unstyled but you can tailwind classes to them. We've also added an additional tw-list-square utility class to give more design options.

# Examples

Ordered List

Item One
Item Two
Item Three

Unordered List (styled bullets)

Item One
Item Two
Item Three

Unordered List (squares)

Item One
Item Two
Item Three

<div class="tw-font-bison-bold tw-uppercase">
    <h6>Ordered List</h6>
    <ol class="tw-list-decimal">
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
    </ol>
    <br>
    <h6>Unordered List</h6>
    <ul class="tw-list-disc">
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
    </ul>
    <br>
    <h6>Unordered List (squares)</h6>
    <ul class="tw-list-square">
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
    </ul>
</div>

# Tables

Coming soon...

← Typography Utilities →