Lozenges

by inuitcss

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<h1>This <span class=pill>here</span> is a pill!</h1>

<p>This <strong class="pill  pill--error">here</strong> is also a pill!</p>

<hr>

<h1>This <span class=loz>here</span> is a lozenge!</h1>

<p>This <strong class="loz  loz--error">here</strong> is also a lozenge!</p>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_lozenges.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    padding:5%;
    background-color:#fff;
    color:#333;
}
.pill--error,
.loz--error{
    background-color:red;
    color:white;
}