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

Loading...

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

Loading...

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

Loading...

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

Loading...

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

Loading...

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

Loading...