CSS: card ​

.instui-card · stable — 임의의 콘텐츠를 수용하는 표면 컨테이너입니다.

base는 기본 상승 표면입니다. 기본 카드 내부에 테두리가 있는 카드를 만들려면 nested을 사용하세요. 패딩과 모서리 반경은 Card 자체의 너비에 따라 조정됩니다; 해당 .content 래퍼가 없는 레거시 마크업은 뷰포트 브레이크포인트를 사용합니다.

Source: card.css

접근성 ​

<article>은 카드가 독립적인 콘텐츠 단위일 때 카드 요소로 사용하세요; 더 큰 랜드마크 내에서 그룹화될 경우에는 <section>을 사용하세요. -variant-container에서는 각 테두리 영역이 의미를 가지도록 직접 자식으로 <section> 요소를 사용하는 것이 좋습니다.

사용법 ​

@import "@pantoken/components/components.css";

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/card.css";

예제들 ​

컨테이너 카드

html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">첫 번째 섹션</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">두 번째 섹션</div>
    </section>
  </div>
</article>

수정자 ​

수정자설명
.-variant-base표준 콘텐츠 카드; 자식들은 스타일되지 않습니다. variant가 설정되지 않았을 때의 기본값입니다.
.-variant-container더 이상 사용되지 않음 — use .-variant-nested.
.-variant-content더 이상 사용되지 않음 — use .-variant-base.
.-variant-nested기본 카드 내부의 카드용 경계 전용 표면입니다.

조건 ​

타입쿼리설명
container(width >=20rem)—
container(width >=40rem)—
media(min-width: 20rem)—
media(min-width: 40rem)—

사용된 토큰 ​

Token타입값
--instui-component-card-background-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-card-border-radius-base-lg<length>1rem
--instui-component-card-border-radius-base-md<length>1rem
--instui-component-card-border-radius-base-sm<length>0.75rem
--instui-component-card-border-radius-nested-lg<length>0.75rem
--instui-component-card-border-radius-nested-md<length>0.5rem
--instui-component-card-border-radius-nested-sm<length>0.5rem
--instui-component-card-nested-border-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-card-padding-base-lg<length>1.5rem
--instui-component-card-padding-base-md<length>1rem
--instui-component-card-padding-base-sm<length>0.75rem
--instui-component-card-padding-nested-lg<length>1rem
--instui-component-card-padding-nested-md<length>0.75rem
--instui-component-card-padding-nested-sm<length>0.5rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-lg<length>1rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-md<length>0.75rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-sm<length>0.5rem
--instui-component-shared-tokens-stroke-width-sm<length>0.0625rem
--instui-elevation-cardnone | <shadow>#—