Doc

Badges

Different types of badges are available with minstyle.io : classic badges with class.ms-badge, badges with github style with class.ms-badge-gh, or notification tags with class.ms-notification. Badges can be used on links <a>, or on tags <span>.

Badge colors

alpha beta release bug warning minstyle.io minstyle.io

<a href="badges-clang=en.html#" class="ms-badge">alpha</a>
<span class="ms-badge ms-blue">beta</span>
<span class="ms-badge ms-green">release</span>
<span class="ms-badge ms-red">bug</span>
<span class="ms-badge ms-yellow">warning</span>
<span class="ms-badge ms-gradient">minstyle.io</span>
<span class="ms-badge ms-white">minstyle.io</span>

Badge sizes

Release Release Release

<span class="ms-badge ms-green ms-small"><i class="fas fa-code"></i> Release</span>
<span class="ms-badge ms-green"><i class="fas fa-code"></i> Release</span>
<span class="ms-badge ms-green ms-large"><i class="fas fa-code"></i> Release</span>

Badge types

Danger Danger Danger Danger

<span class="ms-badge ms-red"><i class="fas fa-exclamation"></i> Danger</span>
<a href="badges-clang=en.html#" class="ms-badge ms-rounded ms-red"><i class="fas fa-exclamation"></i> Danger</a>
<span class="ms-badge ms-border ms-red"><i class="fas fa-exclamation"></i> Danger</span>
<span class="ms-badge ms-border ms-rounded ms-red"><i class="fas fa-exclamation"></i> Danger</span>

GitHub Badges

To use GitHub badges with icons, it is necessary to integrate fontawesome.com icons into your project.

GitHub NodeJS minstyle.io HTML5 CSS

<a class="ms-badge-gh" href="badges-clang=en.html#">
	<span class="ms-dark-side">
		GitHub
	</span>
	<span class="ms-color-side">
		<i class="fas fa-code-branch"></i>
	</span>
</a>

<a class="ms-badge-gh" href="badges-clang=en.html#">
	<span class="ms-dark-side">
		NodeJS
	</span>
	<span class="ms-color-side ms-green">
		<i class="fab fa-node-js"></i>
	</span>
</a>

<a class="ms-badge-gh" href="badges-clang=en.html#">
	<span class="ms-dark-side">
		minstyle.io
	</span>
	<span class="ms-color-side ms-gradient">
		<i class="fas fa-heart"></i>
	</span>
</a>

<a class="ms-badge-gh" href="badges-clang=en.html#">
	<span class="ms-dark-side">
		HTML5
	</span>
	<span class="ms-color-side ms-red">
		<i class="fab fa-html5"></i>
	</span>
</a>

<a class="ms-badge-gh" href="badges-clang=en.html#">
	<span class="ms-dark-side">
		CSS
	</span>
	<span class="ms-color-side ms-blue">
		<i class="fab fa-css3-alt"></i>
	</span>
</a>

Notification badges

23 2 4

<span class="ms-notification ms-green ms-small">23</span>
<span class="ms-notification ms-blue ms-large">2</span>
<span class="ms-notification ms-red">4</span>

Get started

Font

CSS Components

CSS Elements