module-label

m-label

カテゴリー名などに使用する、小さなラベルを表示する。a要素にも指定できる。
.m-label-third は文字色が $body-color = $gray-strong となる。

吾輩は猫である。名前はまだ無い。m-labelm-label(link)どこで生れたかとんと見当がつかぬ。

<p>吾輩は猫である。名前はまだ無い。<span class="m-label">m-label</span><a href="#" class="m-label">m-label(link)</a>どこで生れたかとんと見当がつかぬ。</p>

m-label-(color)

ラベルの色を変更する。(color)は標準のカラーテーブルを参照。

吾輩は猫である。名前はまだ無い。m-label-graym-label-gray(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-firstm-label-first(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-secondm-label-second(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-thirdm-label-third(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-infom-label-info(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-importantm-label-important(link)どこで生れたかとんと見当がつかぬ。

<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-gray">m-label-gray</span><a href="#" class="m-label m-label-gray">m-label-gray(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-first">m-label-first</span><a href="#" class="m-label m-label-first">m-label-first(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-second">m-label-second</span><a href="#" class="m-label m-label-second">m-label-second(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-third">m-label-third</span><a href="#" class="m-label m-label-third">m-label-third(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-info">m-label-info</span><a href="#" class="m-label m-label-info">m-label-info(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-important">m-label-important</span><a href="#" class="m-label m-label-important">m-label-important(link)</a>どこで生れたかとんと見当がつかぬ。</p>

m-label-inverse

ラベルの文字色をbody要素の文字色、背景色をbody要素の背景色にする。
.m-label-(color) と同時に使用すると、文字色が指定した色になる。

吾輩は猫である。名前はまだ無い。m-label-inversem-label-inverse(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-inversem-label-inverse(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-inversem-label-inverse(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-inversem-label-inverse(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-inversem-label-inverse(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-inversem-label-inverse(link)どこで生れたかとんと見当がつかぬ。

<div style="background-color: #999; padding: 1rem; color: #eee;">
    <p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-inverse">m-label-inverse</span><a href="#" class="m-label m-label-inverse">m-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>
    <p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-inverse m-label-first">m-label-inverse</span><a href="#" class="m-label m-label-inverse m-label-first">m-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>
    <p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-inverse m-label-second">m-label-inverse</span><a href="#" class="m-label m-label-inverse m-label-second">m-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>
    <p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-inverse m-label-third">m-label-inverse</span><a href="#" class="m-label m-label-inverse m-label-third">m-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>
    <p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-inverse m-label-info">m-label-inverse</span><a href="#" class="m-label m-label-inverse m-label-info">m-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>
    <p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-inverse m-label-important">m-label-inverse</span><a href="#" class="m-label m-label-inverse m-label-important">m-label-inverse(link)</a>どこで生れたかとんと見当がつかぬ。</p>
</div>

m-label-oval

ラベルが小判型になる。

吾輩は猫である。名前はまだ無い。m-label-graym-label-gray(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-firstm-label-first(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-secondm-label-second(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-thirdm-label-third(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-infom-label-info(link)どこで生れたかとんと見当がつかぬ。

吾輩は猫である。名前はまだ無い。m-label-importantm-label-important(link)どこで生れたかとんと見当がつかぬ。

<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-oval m-label-gray">m-label-gray</span><a href="#" class="m-label m-label-oval m-label-gray">m-label-gray(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-oval m-label-first">m-label-first</span><a href="#" class="m-label m-label-oval m-label-first">m-label-first(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-oval m-label-second">m-label-second</span><a href="#" class="m-label m-label-oval m-label-second">m-label-second(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-oval m-label-third">m-label-third</span><a href="#" class="m-label m-label-oval m-label-third">m-label-third(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-oval m-label-info">m-label-info</span><a href="#" class="m-label m-label-oval m-label-info">m-label-info(link)</a>どこで生れたかとんと見当がつかぬ。</p>
<p>吾輩は猫である。名前はまだ無い。<span class="m-label m-label-oval m-label-important">m-label-important</span><a href="#" class="m-label m-label-oval m-label-important">m-label-important(link)</a>どこで生れたかとんと見当がつかぬ。</p>