With minstyle.io, many major HTML elements have been designated. Like paragraphs, titles, lists, blockquotes, and more.

Heading

Title h1 (35px)

Title h2 (32px)

Title h3 (29px)

Title h4 (26px)

Title h5 (22px)

Title h6 (19px)

<h1>Title h1 (35px)</h1>
<h2>Title h2 (32px)</h2>
<h3>Title h3 (29px)</h3>
<h4>Title h4 (26px)</h4>
<h5>Title h5 (22px)</h5>
<h6>Title h6 (19px)</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur mollitia, rem neque aperiam facere quasi reiciendis odit assumenda tempore eligendi impedit atque maiores iure eum quia doloribus ipsum odio quae!

<p>
    Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit. Pariatur mollitia, rem neque aperiam facere quasi reiciendis odit assumenda tempore eligendi impedit atque maiores iure eum quia doloribus ipsum odio quae!
</p>

Text utilities

Text colors.

Lorem ipsum dolor sit amet ms-text-info elit. Quibusdam aut vero eum, ms-text-success spa alias ms-text-black accusamus ms-text-danger officiis eligendi totam ms-text-whiteipsa ratione deserunt ms-text-warning, sit itaque numquam similique, cupiditate vitae ms-text-gray.

<p>
    Lorem ipsum dolor sit amet <span class="ms-text-info">ms-text-info</span> elit. Quibusdam aut vero eum, <span class="ms-text-success">ms-text-success</span> spa alias <span class="ms-text-black" style="background-color: gray">ms-text-black</span> accusamus <span class="ms-text-danger">ms-text-danger</span> officiis eligendi totam <span class="ms-text-white" style="background-color: black">ms-text-white</span>ipsa ratione deserunt <span class="ms-text-warning">ms-text-warning</span>, sit itaque numquam similique, cupiditate vitae <span class="ms-text-gray">ms-text-gray</span>.
</p>

Text alignements.

Lorem ipsum dolor - ms-text-left

Lorem ipsum dolor - ms-text-center

Lorem ipsum dolor - ms-text-right

Lorem ipsum dolor - ms-text-justify

<p class="ms-text-left">Lorem ipsum dolor - ms-text-left</p>
<p class="ms-text-center">Lorem ipsum dolor - ms-text-center</p>
<p class="ms-text-right">Lorem ipsum dolor - ms-text-right</p>
<p class="ms-text-right">Lorem ipsum dolor - ms-text-justify</p>

Text semantic.

Rendering	HTML Tag
`code`	`<code>`
Mark	`<mark>`
`terminal`	`<kbd>`
~~delete~~	`<del>`
~~delete~~	`<s>`
underline	`<ins>`
underline	`<u>`
small text	`<small>`
bold text	`<b>`
bold text	`<strong>`
bold text	`<cite>`
text ^sup	`<sup>`
text _sub	`<sub>`

Lists

Default list:

Item
Item
- Sub item
- Sub item
Item

Summary:

Item
Item
1. Sub item
2. Sub item
Item

List descrition:

List descrition: descrition...

<ul>
  <li>Item</li>
  <li>Item
    <ul>
      <li>Sub item</li>
      <li>Sub item</li>
    </ul>
  </li>
  <li>Item</li>
</ul>

<ol>
    <li>Item</li>
    <li>Item
        <ol>
            <li>Sub item</li>
            <li>Sub item</li>
        </ol>
    </li>
    <li>Item</li>
</ol>

<dl>
  <dt>List descrition</dt>
  <dd>descrition</dd>
</dl>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Jhon Doe

<blockquote class="ms-blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <i>Jhon Doe</i>
</blockquote>

<blockquote class="ms-blockquote ms-info">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <i>Jhon Doe</i>
</blockquote>

<blockquote class="ms-blockquote ms-success">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <i>Jhon Doe</i>
</blockquote>

<blockquote class="ms-blockquote ms-warning">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <i>Jhon Doe</i>
</blockquote>

<blockquote class="ms-blockquote ms-error">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <i>Jhon Doe</i>
</blockquote>

Thematic break

<hr>

1.0.2

Typographie