Typography

With minstyle.io, many major HTML typographical and sementic elements have been designated. Like mark, code, kbd, blockquotes, and more.

Note that minstyle.io integrates the Inter font for the whole text.

Mark

Mark could be use with mark element or .ms-mark class.

Live Editor

<div> <mark>Marked Text</mark> and <div class="ms-mark">Marked Text to.</div> </div>

<div>
    <mark>Marked Text</mark> and <div class="ms-mark">Marked Text to.</div>
</div>

Result

Marked Text and

Marked Text to.

Code

Code could be use with code element or .ms-code class.

Live Editor

<div> <code>Code Text</code> and <div class="ms-code">Code Text to.</div> </div>

<div>
    <code>Code Text</code> and <div class="ms-code">Code Text to.</div>
</div>

Result

Code Text and

Code Text to.

kbd

kbd could be use with kbd element or .ms-kbd class.

Live Editor

<div> <kbd>Code Text</kbd> and <div class="ms-kbd">Code Text to.</div> </div>

<div>
    <kbd>Code Text</kbd> and <div class="ms-kbd">Code Text to.</div>
</div>

Result

Code Text and

Code Text to.

Sementic

Live Editor

<div> <p><del>Text del</del></p> <p><s>Text del</s></p> <p><small>Text del</small></p> <p><b>Text del</b></p> <p><strong>Text del</strong></p> <p><i>Text del</i></p> <p><cite>Text del</cite></p> <p>Text ^del</p> <p>Text _del</p> </div>

<div>
    <p><del>Text del</del></p>
    <p><s>Text del</s></p>
    <p><small>Text del</small></p>
    <p><b>Text del</b></p>
    <p><strong>Text del</strong></p>
    <p><i>Text del</i></p>
    <p><cite>Text del</cite></p>
    <p>Text <sup>del</sup></p>
    <p>Text <sub>del</sub></p>
</div>

Result

Text del

Text del

Text del

Text del

Text del

Text del

Text del

Text ^del

Text _del

Paragraphs

Live Editor

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

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

Result

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!

hr

To visually separate your content, you can use the hr with hr or .ms-hr class.

Live Editor

<div> 1.<hr/>2.<div class="ms-hr"></div>3. </div>

<div>
    1.<hr/>2.<div class="ms-hr"></div>3. 
</div>

Result

1.

---

2.

3.