List Title

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

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

  • DEMO
  • Style
  • Numbering
  • Icon
タイトル 項目
タイトル タイトル 項目
タイトル 項目
タイトル タイトル 項目
タイトル 項目
タイトル タイトル 項目
タイトル 項目
タイトル タイトル 項目

使い方

現在制作中
  • HTML
  • CSS
.lo-listTitle {border-spacing: 0;}
  .llt-list {text-align: left;}
  .llt-list:not(:last-child) {height: 35px;}
  .llt-ti {
    height: 20px;
    padding-right: 16px;
    font-weight: bold;
    white-space: nowrap;
  }
  .llt-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;
  }
  .mark .llt-ti::before {
    content: '';
    height: 12px;
  }
  .num .llt-list {counter-increment: caution;}
  .num .llt-ti::before {content: counter(caution);}
  .llt-ti[data-ico]::before {
    content: attr(data-ico);
    font-family: 'Material Icons';
  }
  @media (770px >= width) {
    [data-card="xm"]:has(.lo-listTitle) {padding: 12px 8px 12px 10px;}
    .llt-ti {padding-right: 8px;}
    .llt-ti::before {margin-right: 6px;}
  }