デザインシステム ケイツー・インタラクティブ

リスト

概要

情報を一覧表示し、ユーザーに選択や操作を促します。例えば、上下のみの罫線とマージンにより、情報のかたまりを明示します。

リストのデザインについては、適時SCSS(module.scss)を改変してください。

一覧(INDEX)デザイン

基本リスト

<ul class="baseList">
<li><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
</ul>

BOXリスト

BOXリストの箱の数につきましては、グリッドを参考にしてください。

<ul class="boxList boxSet">
<li class="boxLine3"><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li class="boxLine3"><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li class="boxLine3"><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
</ul>

まとめリスト

<div class="matomeSelect">
<button type="button" class="labelType main"><span>BTN</span></button>
</div>
<ul class="matomeList">
<li><div class="checkBoxCell"><label><input type="checkbox" value="" checked><span class="inputCheck"></span></label></div>
<a href="#" class="matomeCell">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
</ul>

ページング

<ul class="listPaging">
<li class="lt"><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="gt"><a href="#">></a></li>
</ul>
改変対象ファイル
CSS:
modules.scss 内に改変対象箇所があります。

箇条書きデザイン

TYPE A

以下はサンプルです。用途を定めてデザインしてください。

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
<ul class="typeA">
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
</ul>

TYPE B

以下はサンプルです。用途を定めてデザインしてください。

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
<ul class="typeB">
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
</ul>
改変対象ファイル
CSS:
modules.scss 内に改変対象箇所があります。