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

Appearance

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

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

Color

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

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

isGapless

gap（内周の余白）の有無を指定します。

	Modifier class
Active	.-is-gapless

Shape

角の形状を指定します。

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

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