Example Card
코드 예제를 보여주기 위한 카드 컴포넌트입니다.
Card Title
카드의 설명 텍스트입니다. 예제에 대한 간단한 설명을 제공합니다.
<button class="mock-btn">예시 버튼</button>
Card Structure
카드는 미리보기 영역과 상세 정보 영역으로 구성됩니다.
.example-preview
라이브 미리보기를 표시하는 영역입니다. 도트 패턴 배경이 적용됩니다.
Preview Area
.example-details
제목, 설명, 코드를 표시하는 영역입니다.
Example Title
Description text goes here.
Card Grid
여러 카드를 그리드로 배치할 수 있습니다.
Usage
카드 컴포넌트의 기본 HTML 구조입니다.
<div class="example-card">
<div class="example-preview">
<!-- Live preview content -->
<div class="mock-ui">
<button class="mock-btn">Button</button>
</div>
</div>
<div class="example-details">
<h3>Card Title</h3>
<p>Card description text.</p>
<div class="code-block">
// Code example here
</div>
</div>
</div>