component-headline

c-headline

新着情報のエントリー繰り返し部分などに使用する、ヘッダとタイトルを併記したコンポーネントを表示する。
article と div 、もしくは dl と dt, dd でマークアップすることができる。
(breakpoint)が sm 以上でインライン表示となる。

article要素の場合

dl要素の場合

2017年08月01日

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

2017年08月01日

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

2017年08月01日

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

<h3>article要素の場合</h3>

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

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

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

<h3>dl要素の場合</h3>

<dl class="c-headline">
    <dt class="c-headline-date">2017年08月01日</dt>
    <p class="c-headline-title"><a href="#">吾輩は猫である。名前はまだ無い。</a></p>
</dl>

<dl class="c-headline">
    <dt class="c-headline-date">2017年08月01日</dt>
    <p class="c-headline-title"><a href="#">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</a></p>
</dl>

<dl class="c-headline">
    <dt class="c-headline-date">2017年08月01日</dt>
    <p class="c-headline-title"><a href="#">掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</a></p>
</dl>