Card

Card(カード)は、ある情報のチャンク(塊)を枠線など視覚的なスタイルで囲って表現します。

body contents

Appearance

見た目の種類を指定します。

Modifier class
Filled*.-appearance-filled
Elevated.-appearance-elevated
Outlined.-appearance-outlined
Card body


Card body


Card body

Color

表面の色 (surface color) を指定します。

Modifier class
Primary*.-color-primary
Secondary.-color-secondary
Tertiary.-color-tertiary
Card body


Card body


Card body

isGapless

gap(内周の余白)の有無を指定します。

Modifier class
Active.-is-gapless
Card body


Card body

Shape

角の形状を指定します。

Modifier class
Circle*.-shape-circle
Square.-shape-square
Card body


Card body

Code

Mixin-based

HTML

<div class='card-component'>
  <figure class='_media'>
    <img class='_thumbnail' src='/images/sample.webp' />
  </figure>
  <div class='_body'>
    <h3>card item title</h3>
    <p>card item description</p>
  </div>
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

.card-component {
  @include inhouse.card-style(
    $options: (
      appearance: Outlined,
      color: primary,
      gapless: true,
    )
  );

  > ._body {
    display: flex;
    flex-direction: column;
    gap: inhouse.get-spacing-size(xs);
    padding: inhouse.get-spacing-size(m);
  }
}

Class-based

HTML

<div class='in-card -appearance-outlined -color-primary -is-gapless'>
  <figure class='_media'>
    <img class='_thumbnail' src='/images/sample.webp' />
  </figure>
  <div class='_body'>
    <h3>card item title</h3>
    <p>card item description</p>
  </div>
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.card-export;

.in-card {
    > ._body {
    display: flex;
    flex-direction: column;
    gap: inhouse.get-spacing-size(xs);
    padding: inhouse.get-spacing-size(m);
  }
}

Assets