List Title

タイトルのインデントを付けたリスト

詳しい導入事例は導入方法を参照してください。

DEMO
Style
Numbering
Icon

タイトル	項目
タイトルタイトル	項目

タイトル	項目
タイトルタイトル	項目

タイトル	項目
タイトルタイトル	項目

タイトル	項目
タイトルタイトル	項目

HTML
CSS

.mod_listTitle {border-spacing: 0;}
.mod_listTitle-list {text-align: left;}
.mod_listTitle-list:not(:last-child) {height: 35px;}
.mod_listTitle-ti {
  height: 20px;
  padding-right: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.mod_listTitle-ti::before {
  height: 20px;
  aspect-ratio: 1/1;
  margin-right: 8px;
  text-align: center;
  font-size: var(--typo-min);
  font-weight: normal;
  border-radius: var(--radius-round);
  background: var(--primary-main);
  color: var(--white-main);
  display: inline-block;
}
.mod_listTitle.mark .mod_listTitle-ti::before {
  content: '';
  height: 12px;
}
.mod_listTitle.num .mod_listTitle-list {counter-increment: num;}
.mod_listTitle.num .mod_listTitle-ti::before {content: counter(num);}
.mod_listTitle-ti[data-ico]::before {
  content: attr(data-ico);
  font-family: 'Material Icons';
}
@media (770px >= width) {
  [data-card="xm"]:has(.mod_listTitle) {padding: 12px 8px 12px 10px;}
  .mod_listTitle-ti {padding-right: 8px;}
  .mod_listTitle-ti::before {margin-right: 6px;}
}

使い方

リストといいながらテーブル使ってます。
デザイン的にも構造的にもTableとかTable Fit使ったほうがいい。どうしてもな時用

以下はListと同じ仕様。
頭の記号の色は[var(--primary-dark)]を指定しています。
+-ul.mod_list-+に+-.num-+クラスを付けることで頭の記号に数字が入ります。
+-.mod_list-li-+に[data-ico]属性を入れることで、入力値のアイコンを表示します。

ナンバリングは{content: counter(num, decimal-leading-zero);}とすることで、01,02となる。