component-headline

headline

新着情報のエントリー繰り返し部分などに使用する、日付とタイトルを並列したコンポーネントを表示する。
特定幅を下回るとタイトルがブロック要素となる。

カテゴリー

吾輩は猫である。名前はまだ無い。

カテゴリー

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

カテゴリー

掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

<div class="headline">
    <time class="headline-date" datetime="2017-08-01T09:00:00+09:00">2017年08月01日</time>
    <p class="headline-category">
        <a href="#" class="label label-first">カテゴリー</a>
    </p>
    <h3 class="headline-title"><a href="#">吾輩は猫である。名前はまだ無い。</a></h3>
</div>

<div class="headline">
    <time class="headline-date" datetime="2017-08-01T09:00:00+09:00">2017年08月01日</time>
    <p class="headline-category">
        <a href="#" class="label label-second">カテゴリー</a>
    </p>
    <h3 class="headline-title"><a href="#">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</a></h3>
</div>

<div class="headline">
    <time class="headline-date" datetime="2017-08-01T09:00:00+09:00">2017年08月01日</time>
    <p class="headline-category">
        <a href="#" class="label label-third">カテゴリー</a>
    </p>
    <h3 class="headline-title"><a href="#">掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</a></h3>
</div>