Typography

Due to Cosmo CSS being targeted for web applications, it only features the basic typographic needs.

Supported tags

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Show code sample

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Paragraph

Show code sample

<p>Paragraph</p>

Anchor tag
Strong tag
Emphasis tag
Code tag
Kbd tag

Show code sample

<a href="#">Anchor tag</a>
<strong>Strong tag</strong>
<em>Emphasis tag</em>
<code>Code tag</code>

Tables

Tables are used to show data that you can display any amount of data.

Column name	Type	Allow null	Keys	Default value
api_key	varchar(255)	NO	PRI	null
user_id	int	YES	MUL	null
valid_since	datetime	NO		null
user_agent	varchar(255)	YES		null
remote_address	varchar(255)	YES		null

Show code sample

<table class="cosmo-table">
    <thead>
    <tr>
        <th>Column name</th>
        <th>Type</th>
        <th>Allow null</th>
        <th>Keys</th>
        <th>Default value</th>
        <th>Extra data</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>api_key</td>
        <td>varchar(255)</td>
        <td>NO</td>
        <td>PRI</td>
        <td>null</td>
        <td></td>
    </tr>
    <tr>
        <td>user_id</td>
        <td>int</td>
        <td>YES</td>
        <td>MUL</td>
        <td>null</td>
        <td></td>
    </tr>
    <tr>
        <td>valid_since</td>
        <td>datetime</td>
        <td>NO</td>
        <td></td>
        <td>null</td>
        <td></td>
    </tr>
    <tr>
        <td>user_agent</td>
        <td>varchar(255)</td>
        <td>YES</td>
        <td></td>
        <td>null</td>
        <td></td>
    </tr>
    <tr>
        <td>remote_address</td>
        <td>varchar(255)</td>
        <td>YES</td>
        <td></td>
        <td>null</td>
        <td></td>
    </tr>
    </tbody>
</table>

Bullet list

A simple bullet list.

Server version
Compile machine
Compile operating system
Linux

Show code sample

<ul class="cosmo-list is--bullet">
    <li>Server version</li>
    <li>Compile machine</li>
    <li>Compile operating system</li>
    <li>Linux</li>
</ul>

Ordered list

A simple ordered list.

Server version
Compile machine
Compile operating system
Linux

Show code sample

<ol class="cosmo-list is--ordered">
    <li>Server version</li>
    <li>Compile machine</li>
    <li>Compile operating system</li>
    <li>Linux</li>
</ol>

Key value list

A key value list displays information based on a key-value pattern.

Server type: MySQL Community Server - GPL
Server version: 8.0.25
Compile machine: x86_64
Compile operating system: Linux

Show code sample

<dl class="cosmo-list is--key-value">
    <dt>Server type</dt>
    <dd>MySQL Community Server - GPL</dd>
    <dt>Server version</dt>
    <dd>8.0.25</dd>
    <dt>Compile machine</dt>
    <dd>x86_64</dd>
    <dt>Compile operating system</dt>
    <dd>Linux</dd>
</dl>