echo-headline
新着情報のエントリー繰り返し部分などに使用する、ヘッダとタイトルを併記したコンポーネントを表示する。
(breakpoint) が lg
以上で、flexboxによるインライン表示となる。
リンクを含む場合は .echo-headline-title
に下線が引かれる。リンクが不要な場合であっても .echo-headline-inner
が必須であることに注意する。
(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
.
article要素、タイトルがh2要素の場合
dl要素の場合
- 2020年12月28日
- 吾輩は猫である。名前はまだ無い。
全体をリンク範囲とした例
カテゴリー
ヘッドライン全体がリンクになっています。吾輩は猫である。名前はまだ無い。
<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
に対応している。
.echo-headline-sm
(default)
.echo-headline-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
以上であってもインラインに整列しなくなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。
.echo-headline-sm
(default)
.echo-headline-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 -->