装飾なし見出し

Example code
<h3 class="headline">見出し中央寄せ</h3>

Example code
<h3 class="headline aLeft">見出し左寄せ</h3>

Example code
<h3 class="headline aRight">見出し右寄せ</h3>

下部ボーダー付き見出し

Example code
<h3 class="headline headline__underline">見出し中央寄せ</h3>

Example code
<h3 class="headline headline__underline--left">見出し左寄せ</h3>

Example code
<h3 class="headline headline__underline--right">見出し右寄せ</h3>

フォントサイズ

Example code
<h3 class="headline headline__fs--xs">見出しサイズ XS</h3>

Example code
<h3 class="headline headline__fs--s">見出しサイズ S</h3>

Example code
<h3 class="headline headline__fs--m">見出しサイズ M</h3>

Example code
<h3 class="headline headline__fs--l">見出しサイズ L</h3>

Example code
<h3 class="headline headline__fs--xl">見出しサイズ XL</h3>

枠線付き見出し

Example code
<h3 class="headline headline__border">見出し中央寄せ</h3>

Example code
<h3 class="headline headline__border borderColor-red-600">枠線色変更</h3>

Example code
<h3 class="headline headline__border borderColor-blue-600 color-blue-600 aLeft">枠線色文字色変更</h3>

Example code
<h3 class="headline headline__border borderColor-blue-600 color-blue-600 headline__fs--xs">枠線色文字色背景色フォントサイズ変更</h3>

※使用したい色のクラス名は、コードサンプルの「カラー」ページからご確認ください。

両サイドボーダー付き見出し

Example code
<h3 class="headline headline__sideBorder">
 <span class="headline headline__sideBorder--line"></span>
  <span class="headline headline__sideBorder--text">見出し中央寄せ</span>
 <span class="headline headline__sideBorder--line"></span>
</h3>

Example code
<h3 class="headline headline__sideBorder">
 <span class="headline headline__sideBorder--line bgColor-blue-700"></span>
  <span class="headline headline__sideBorder--text color-blue-700">見出し中央寄せ</span>
 <span class="headline headline__sideBorder--line bgColor-blue-700"></span>
</h3>

※使用したい色のクラス名は、コードサンプルの「カラー」ページからご確認ください。

サブ見出し付き

Example code
<h3 class="headline">
 メイン見出し
 <span class="headline__sub">サブ見出し</span>
</h3>

Example code
<h3 class="headline headline__underline">
 見出し中央寄せ
 <span class="headline__sub">サブ見出し</span>
</h3>

Example code
<h3 class="headline headline__sideBorder">
 <span class="headline headline__sideBorder--line"></span>
  <span class="headline headline__sideBorder--text">ボーダー色変更<span class="headline__sub">サブ見出し</span></span>
 <span class="headline headline__sideBorder--line"></span>
</h3>

Example code
<h3 class="headline headline__border borderColor-blue-600 color-blue-600">
 枠線色文字色変更
 <span class="headline__sub color-blue-600">サブ見出し</span>
</h3>

Example code
<h3 class="headline headline__fs--xs">
 見出しサイズ XS
 <span class="headline__sub">サブ見出し</span>
</h3>