CSS: card

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

Variant는 직접 자식 요소의 스타일링 방식을 제어합니다: content(기본)는 자식들을 스타일하지 않고, container은 자식들을 테두리와 패딩이 있는 섹션으로 쌓습니다. 패딩은 뷰포트 너비에 따라 스케일되며 두 가지 variant에서 동일하게 동작합니다. Size는 완전히 반응형이며 — 패딩과 border-radius는 표준 min-width 미디어 쿼리를 통해 320px(20rem)과 640px(40rem)에서 자동으로 증가하므로 별도의 사이즈 클래스가 필요하지 않습니다. 제목, 버튼 및 기타 인라인 컴포넌트에는 @pantoken/components와 함께 사용하세요.

접근성

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

사용법

@import "@pantoken/plugin-custom-components/custom-components.css";

@import "@pantoken/plugin-custom-components/custom-components.css";

예제들

콘텐츠 카드

<article class="instui-card">
  <h2 class="instui-heading -h3">Card title</h2>
  <p>Content here.</p>
  <button class="instui-button">Action</button>
</article>

컨테이너 카드

<article class="instui-card -variant-container">
  <section>First section</section>
  <section>Second section</section>
</article>

구조

.instui-card
  ‹content›

flowchart TD n0[".instui-card"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자

수정자	설명
.-variant-container	컨테이너 카드; 직접 자식들이 테두리와 패딩이 있는 섹션이 됩니다.
.-variant-content	표준 콘텐츠 카드; 자식들은 스타일되지 않습니다. variant가 설정되지 않았을 때의 기본값입니다.

조건

타입	쿼리	설명
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-card	none | <shadow>#	—

브라우저 지원

• @scope는 Baseline 2023 신규 제공 항목입니다; 구형 브라우저에서는 범위 없는 평면 스타일시트로 폴백되며 시각적 스타일 손실이 없습니다.

관련 항목

• heading — 카드 내에 직접 또는 컨테이너 섹션 안에 배치하세요.
• button — 카드 내에 직접 또는 컨테이너 섹션 안에 배치하세요.
• img — 미디어 영역으로 카드 내에 직접 배치하세요.
• badge — 상태 표시기로 카드 내에 직접 배치하세요.

참고

• https://drafts.csswg.org/css-cascade-6/#scoping