コンポーネント集

カード21 

<ul class="card-21__wrapper">
    <li class="card-21">
        <h3 class="card-21__head">見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 0</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">長い見出し長い見出し長い見出し長い見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 1</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 2</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 3</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 4</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">長い見出し長い見出し長い見出し長い見出し長い見出し長い見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 5</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 6</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 7</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">長い見出し長い見出し長い見出し長い見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 8</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
    <li class="card-21">
        <h3 class="card-21__head">長い見出し長い見出し長い見出し</h3>
        <div class="card-21__body">テキストが入ります。テキストが入ります。テキストが入ります。</div>
        <div class="card-21__foot"><span>number 9</span></div><a class="card-21__link" href="https://github.com/zakzakst/parts" target="_blank"><span>詳細を見る</span></a>
    </li>
</ul>
 
ul.card-21__wrapper
  - for (var x = 0; x < 10; x++)
    li.card-21
      h3.card-21__head #{ heads[x] }
      .card-21__body #{ texts[x] }
      .card-21__foot
        span number #{x}
      a.card-21__link(href='https://github.com/zakzakst/parts', target='_blank')
        span 詳細を見る
 
{
  "heads": [
    "見出し",
    "長い見出し長い見出し長い見出し長い見出し",
    "見出し",
    "見出し",
    "見出し",
    "長い見出し長い見出し長い見出し長い見出し長い見出し長い見出し",
    "見出し",
    "見出し",
    "長い見出し長い見出し長い見出し長い見出し",
    "長い見出し長い見出し長い見出し"
  ],
  "texts": [
    "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
    "テキストが入ります。テキストが入ります。テキストが入ります。"
  ]
}
  • Content: 
    $BLOCK_NAME: '.card-21';

// 変数

#{ $BLOCK_NAME } {
  &__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
  }

  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  background: #eee;
  position: relative;
  &:has(#{ $BLOCK_NAME }__link:hover) {
    background: #fee;
  }

  &__link {
    // display: inline-block;
    // height: 0;
    &::after {
      position: absolute;
      inset: 0;
      content: '';
    }
    > span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }
}
  • URL: /components/raw/card21/card21.scss
  • Filesystem Path: src/components/cards/card21/card21.scss
  • Size: 769 Bytes

参考