Get started

Font

CSS Components

CSS Elements

Doc

Alerts

Alerts allow you to inform your users of the actions they are taking. The standard class of minstyle.io alerts is ms-alert. You can also define a color with the class ms-blue, or a size with : ms-large.

With title,
Normal, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure officiis provident vel itaque beatae illum nobis consequatur nulla necessitatibus, corporis dolorem cumque soluta rem voluptatum eius ipsum omnis, atque reiciendis.
<div class="ms-alert">
	<h5><b>With title</b>,</h5>
	<strong>Normal</strong>, Lorem ipsum dolor sit amet, consectetur adipisicing...
</div>
With icon, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum culpa numquam asperiores, laudantium esse quas perferendis ad laborum ipsum facilis, saepe sed. Aperiam sed, inventore excepturi harum eum exercitationem numquam!
<div class="ms-alert ms-red">
	<b><i class="fas fa-exclamation-triangle"></i> With icon</b>, Lorem <span class="colored">ipsum</span> dolor...
</div>
Hello, this is an ms-alert, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia minus delectus voluptatem quas officia deleniti voluptas distinctio magnam.
<div class="ms-alert ms-green">
	<b>Hello, this is an ms-alert</b>, <a href="">Lorem</a> ipsum dolor sit amet...
</div>

Large,

Large alert, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ullam blanditiis necessitatibus, natus unde enim autem voluptas assumenda, accusamus doloremque dolor hic voluptatem amet earum mollitia ex quia dolorem impedit?
<div class="ms-alert ms-blue ms-large">
	<h4><b>Large</b>,</h4>
	<b>Large alert</b>, Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>

Title,

Large alert, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ullam blanditiis necessitatibus, natus unde enim autem voluptas assumenda, accusamus doloremque dolor hic voluptatem amet earum mollitia ex quia dolorem impedit?
<div class="ms-alert ms-yellow ms-large">
	<h4><b>Title</b>,</h4>
	<b>Large alert</b>, Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
Hello,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa sit, ex, inventore nisi a, sunt possimus nulla iste illum amet quis officia. Asperiores iusto assumenda natus omnis eligendi, delectus id.
<div class="ms-alert ms-white">
	<h5><b>Hello,</b></h5>
	Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Ipsa sit...
</div>
Small alert, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi molestias ipsum! Libero magni ullam quam aut repellendus nobis amet cumque odit ea asperiores dignissimos soluta sapiente, blanditiis, quaerat minus.
<div class="ms-alert ms-success ms-small">
	<b>Small alert</b>, Lorem ipsum dolor sit amet, consectetur ...
</div>
Clear, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi molestias ipsum! Libero magni ullam quam aut repellendus nobis amet cumque odit ea asperiores dignissimos soluta sapiente, blanditiis, quaerat minus.
<div class="ms-alert ms-clear">
	<b>Clear</b>, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere modi molestias ipsum! Libero magni ullam quam aut repellendus nobis amet cumque odit ea asperiores dignissimos soluta sapiente, blanditiis, quaerat minus.
</div>