GitHub

Structured List

제목, 설명, 메타 정보와 작업을 카드형 목록으로 정리하는 구조화 목록 컴포넌트입니다.

  • 주민등록등본 발급

    주소와 세대 구성 정보를 확인할 수 있는 증명서입니다.

    기관
    행정안전부
    처리시간
    즉시

  • 건축물대장 열람

    건축물의 기본 정보와 소유 현황을 확인합니다.

    기관
    국토교통부
    처리시간
    즉시
examples/krds/structured-list-demo.tsx
import { Button } from "@/components/ui/button"
import {
  StructuredList,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/structured-list.json

사용법

import { StructuredList, StructuredListContent, StructuredListItem, StructuredListTitle } from "@/components/ui/structured-list"
<StructuredList variant="grid">
  <StructuredListItem><StructuredListContent><StructuredListTitle>민원 신청</StructuredListTitle></StructuredListContent></StructuredListItem>
</StructuredList>

KRDS 정렬

StructuredList는 key-value 요약, 카드형 목록, action slot을 위한 KRDS composition입니다. Table이 아닌 요약/신청 목록에는 list semantics와 metadata slots를 우선합니다.

구성

다음 조합으로 StructuredList를 사용할 수 있습니다.

StructuredList
├── StructuredListItem
├── StructuredListHeader
├── StructuredListContent
├── StructuredListTitle
├── StructuredListDescription
├── StructuredListMeta
├── StructuredListFooter
├── StructuredListActions

예제

Basic

제목, 설명, 메타 정보와 작업을 카드형 목록으로 정리하는 구조화 목록 컴포넌트입니다.

  • 주민등록등본 발급

    주소와 세대 구성 정보를 확인할 수 있는 증명서입니다.

    기관
    행정안전부
    처리시간
    즉시

  • 건축물대장 열람

    건축물의 기본 정보와 소유 현황을 확인합니다.

    기관
    국토교통부
    처리시간
    즉시
examples/krds/structured-list-demo.tsx
import { Button } from "@/components/ui/button"
import {
  StructuredList,

API 참조

속성타입기본값설명
variant"default" | "full" | "grid" | "compact""default"목록 레이아웃
interactivebooleanfalse항목 포커스/호버 강조