リンク・ボタン

リンク

文章中のリンク

詳しい情報はこちらをご覧ください。 さらに詳しい解説は公式サイトからご確認いただけます。 詳細な資料は説明書PDF（2.3MB）からダウンロードできます。 
詳しい情報は<a class="c-link" href="★★★">こちら</a>をご覧ください。<br aria-hidden="true">
さらに詳しい解説は<a class="c-link" href="★★★" target="_blank">公式サイト<span role="img" class="icon_external" aria-label="新規タブで開く"></span></a>からご確認いただけます。<br aria-hidden="true">
詳細な資料は<a class="c-link" href="★★★" target="_blank">説明書PDF（2.3MB）<span role="img" class="icon_pdf" aria-label="PDFファイルを開く"></span></a>からダウンロードできます。<br aria-hidden="true">

ボタン

デフォルトボタン

詳しく見る 公式サイト 説明書PDF（2.3MB） 前のページへ戻る 次のページへ進む 非活性ボタン 
<div class="u-space-y-xs">
<a class="c-btn" href="★★★"><span class="c-btn_label">詳しく見る</span></a>
<a class="c-btn" href="★★★"><span class="c-btn_label">公式サイト<span role="img" class="icon_external" aria-label="新規タブで開く"></span></span></a>
<a class="c-btn" href="★★★"><span class="c-btn_label">説明書PDF（2.3MB）<span role="img" class="icon_pdf" aria-label="PDFファイルを開く"></span></span></a>
<a class="c-btn" href="★★★"><span class="c-btn_label"><span role="img" class="icon_caret-left"></span>前のページへ戻る</span></a>
<a class="c-btn" href="★★★"><span class="c-btn_label">次のページへ進む<span role="img" class="icon_caret-right"></span></span></a>
<a class="c-btn" href="★★★" inert><span class="c-btn_label">非活性ボタン</span></a>
</div>

ボタン幅 固定

ボタン小（.-fixed-sm） ボタン中（.-fixed-md） ボタン大（.-fixed-lg） 
<div class="u-space-y-xs">
<a class="c-btn -fixed-sm" href="★★★"><span class="c-btn_label">ボタン小（.-fixed-sm）</span></a>
<a class="c-btn -fixed-md" href="★★★"><span class="c-btn_label">ボタン中（.-fixed-md）</span></a>
<a class="c-btn -fixed-lg" href="★★★"><span class="c-btn_label">ボタン大（.-fixed-lg）</span></a>
</div>

ボタン幅 コンテンツ幅により可変

ボタン小（.-min-sm） ボタン中（.-min-md） ボタン大（.-min-lg） 
<div class="u-space-y-xs">
<a class="c-btn -min-sm" href="★★★"><span class="c-btn_label">ボタン小（.-min-sm）</span></a>
<a class="c-btn -min-md" href="★★★"><span class="c-btn_label">ボタン中（.-min-md）</span></a>
<a class="c-btn -min-lg" href="★★★"><span class="c-btn_label">ボタン大（.-min-lg）</span></a>
</div>