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);
}
}