component-headline

c-headline

注意.c-headline は、Version2.0.0でマークアップとレイアウトの方式が変更されました。

.c-headlineの主な変更点
CSSのflexboxによる整列を行うようになりました。
.c-headline-date が .c-headline-header に変更されました。
.c-headline-inner が追加され、全体をリンクとしてマークアップできるようになりました。
クラス指定がないリンクに下線が引かれるようになりました。

新着情報のエントリー繰り返し部分などに使用する、ヘッダとタイトルを併記したコンポーネントを表示する。
(breakpoint)が md 以上でインライン表示となる。

補足：ヘッダの幅

.c-headline-header には min-width: 8.5em; のスタイルが定義されている。一般的な日本語の日付表記は文字数が変化するため、ヘッダを最も文字幅が大きくなる「12月28日」で整列するための措置である。
異なる表記を使用する場合は、 min-width を調整すること。

note: Header width

.c-headline-header defines the style min-width: 8.5em; . In general Japanese date notation, the number of characters changes, so it is a measure to adjust the headers to "12月28日(December 28)" where the character width is the largest. If you use a different notation, adjust the min-width.

article要素、タイトルがh2要素の場合

カテゴリー

掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

カテゴリー

掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

dl要素の場合

2020年12月28日
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。
<h3>article要素の場合</h3>

<article class="c-headline">
    <div class="c-headline-inner">
        <time class="c-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</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>
    </div><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->

<article class="c-headline">
    <div class="c-headline-inner">
        <time class="c-headline-header" datetime="2020-01-01T09:00:00+09:00">2020年1月1日</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>
    </div><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->

<article class="c-headline">
    <div class="c-headline-inner">
        <time class="c-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</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>
    </div><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->


<article class="c-headline">
    <a href="#" class="c-headline-inner">
        <time class="c-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="c-headline-category">
            <span class="m-label m-label-first">カテゴリー</span>
        </p>
        <p class="c-headline-title">全体がリンク範囲になっています。吾輩は猫である。名前はまだ無い。</p>
    </a><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->

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

<article class="c-headline">
    <a href="#" class="c-headline-inner">
        <time class="c-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="c-headline-category">
            <span class="m-label m-label-third">カテゴリー</span>
        </p>
        <p class="c-headline-title">掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</p>
    </a><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->

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

<article class="c-headline">
    <dl class="c-headline-inner">
        <dt class="c-headline-header">2020年12月28日</dt>
        <dd class="c-headline-title"><a href="#">吾輩は猫である。名前はまだ無い。</a></dd>
    </dl><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->

<article class="c-headline">
    <dl class="c-headline-inner">
        <dt class="c-headline-header">2020年12月28日</dt>
        <dd class="c-headline-title"><a href="#">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</a></dd>
    </dl><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->

<article class="c-headline">
    <dl class="c-headline-inner">
        <dt class="c-headline-header">2020年12月28日</dt>
        <dd class="c-headline-title"><a href="#">掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</a></dd>
    </dl><!-- /.c-headline-inner -->
</article><!-- /.c-headline -->