layout-labels

echo-labels

.echo-label を繰り返すための領域を作成する。

ヘッダを含む場合は定義リスト dl > dt, dd を使用する。含まない場合はリスト ul > li でマークアップすること。

Internet Explorer 11のラベル・ナビゲーションの不具合について

<p class="echo-title echo-title-level-4 echo-title-style-a echo-margin-bottom-sm">ヘッダがある場合</p>

<nav class="echo-labels">
    <dl class="echo-labels-list">
        <dt class="echo-labels-header">タグ</dt>
        <dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
        <dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">テキストが長いラベル</a></dd>
        <dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
        <dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">テキストがとても長いラベル</a></dd>
        <dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
        <dd class="echo-labels-item"><a href="#" class="echo-label echo-label-style-a">ラベル</a></dd>
    </dl><!-- /.echo-labels-list -->
</nav><!-- /.echo-labels -->

<p class="echo-title echo-title-level-4 echo-title-style-a echo-margin-top-lg echo-margin-bottom-sm">ヘッダがない場合</p>

<nav class="echo-labels">
    <ul class="echo-labels-list">
        <li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
        <li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">テキストが長いラベル</a></li>
        <li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
        <li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">テキストがとても長いラベル</a></li>
        <li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
        <li class="echo-labels-item"><a href="#" class="echo-label echo-label-oval echo-label-style-a">ラベル</a></li>
    </ul><!-- /.echo-labels-list -->
</nav><!-- /.echo-labels -->