component-headline

echo-headline

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

リンクを含む場合は .echo-headline-title に下線が引かれる。リンクが不要な場合であっても .echo-headline-inner が必須であることに注意する。

文字サイズの変化 group: article
(breakpoint)(fontsize)
.echo-***-sm.echo-***.echo-***-lg
md以下 xs sm md
lg以上 sm md lg

この表の解説

補足:ヘッダの幅

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

note: Header width

.echo-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 "20**年12月28日(December 28, 20**)" where the character width is the largest. If you use a different notation, adjust the min-width.

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm">article要素、タイトルがh2要素の場合</p>

<article class="echo-headline">
    <div class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <a href="#" class="echo-label echo-label-style-a">カテゴリー</a>
        </p>
        <h2 class="echo-headline-title"><a href="#">タイトルとラベルが別々のリンクになっています。吾輩は猫である。名前はまだ無い。</a></h2>
    </div><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">dl要素の場合</p>

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

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">全体をリンク範囲とした例</p>

<article class="echo-headline echo-margin-top-20">
    <a href="#" class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <span class="echo-label echo-label-style-a">カテゴリー</span>
        </p>
        <h2 class="echo-headline-title">ヘッドライン全体がリンクになっています。吾輩は猫である。名前はまだ無い。</h2>
    </a><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->

sub class echo-headline-(size)

文字サイズを変更する。
(size)は、 sm, lg に対応している。

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">.echo-headline-sm</p>

<article class="echo-headline echo-headline-sm">
    <div class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <a href="#" class="echo-label echo-label-style-a">カテゴリー</a>
        </p>
        <h2 class="echo-headline-title"><a href="#">タイトルとラベルが別々のリンクになっています。吾輩は猫である。名前はまだ無い。</a></h2>
    </div><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">(default)</p>

<article class="echo-headline">
    <div class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <a href="#" class="echo-label echo-label-style-a">カテゴリー</a>
        </p>
        <h2 class="echo-headline-title"><a href="#">タイトルとラベルが別々のリンクになっています。吾輩は猫である。名前はまだ無い。</a></h2>
    </div><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">.echo-headline-lg</p>

<article class="echo-headline echo-headline-lg">
    <div class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <a href="#" class="echo-label echo-label-style-a">カテゴリー</a>
        </p>
        <h2 class="echo-headline-title"><a href="#">タイトルとラベルが別々のリンクになっています。吾輩は猫である。名前はまだ無い。</a></h2>
    </div><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->

sub class echo-headline-fixed

文字が (breakpoint) に関わらず常に同じサイズとなり、かつ、 (breakpoint) が lg 以上であってもインラインに整列しなくなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">.echo-headline-sm</p>

<article class="echo-headline echo-headline-sm echo-headline-fixed">
    <div class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <a href="#" class="echo-label echo-label-style-a">カテゴリー</a>
        </p>
        <h2 class="echo-headline-title"><a href="#">タイトルとラベルが別々のリンクになっています。吾輩は猫である。名前はまだ無い。</a></h2>
    </div><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">(default)</p>

<article class="echo-headline echo-headline-fixed">
    <div class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <a href="#" class="echo-label echo-label-style-a">カテゴリー</a>
        </p>
        <h2 class="echo-headline-title"><a href="#">タイトルとラベルが別々のリンクになっています。吾輩は猫である。名前はまだ無い。</a></h2>
    </div><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">.echo-headline-lg</p>

<article class="echo-headline echo-headline-lg echo-headline-fixed">
    <div class="echo-headline-inner">
        <time class="echo-headline-header" datetime="2020-12-28T09:00:00+09:00">2020年12月28日</time>
        <p class="echo-headline-category">
            <a href="#" class="echo-label echo-label-style-a">カテゴリー</a>
        </p>
        <h2 class="echo-headline-title"><a href="#">タイトルとラベルが別々のリンクになっています。吾輩は猫である。名前はまだ無い。</a></h2>
    </div><!-- /.echo-headline-inner -->
</article><!-- /.echo-headline -->