본문으로 건너뛰기

🎨 Component Pattern Library

⚠️ This page is only visible in development mode

CalloutBox Variants

All available color variants for the CalloutBox component:

Default

Default Variant

Light purple background, no border. Good for general information.

🔗Example Link

Tip

Tip Variant

Blue background with left border. Great for helpful tips and recommendations.

💡Learn More

Info

Info Variant

Light blue background with left border. Perfect for important information.

Warning

Warning Variant

Orange background with left border. Use for cautions and warnings.

Purple (AI Fluency Framework)

Purple Variant

Matches the AI Fluency Framework color. Elegant purple background.

📥Download

Mint

Mint Variant

Fresh mint green background. Great for success messages or eco-friendly content.

Peach

Peach Variant

Warm peach background. Perfect for friendly, approachable content.

Sand

Sand Variant

Soft sand beige background. Ideal for neutral, professional content.

Using Nicknames

Ocean Blue (using nickname)

You can use colorNickname='ocean' instead of variant='info'

Custom Color

Custom Color Example

You can use any custom color with the 'custom' variant.

Pre-configured Components

ResourceDownload

Flexible component for resources with images and multiple download links:

AI Research Paper

Download our comprehensive research on AI interpretability and safety.

📖Read Online📥Download PDF📊Supplementary Materials💻Code Repository

VocabularyGuide (Legacy)

Pre-configured for vocabulary guides (kept for backward compatibility):

손으로 종이에 펜을 들고 있는 검은색 윤곽선

AI 유창성 어휘 가이드

평이한 언어로 작성된 주요 용어 참조 자료입니다. 암기할 필요 없이 필요할 때 참조하세요.

📖한글 번역 보기📥원문 PDF 다운로드

ResourceCard

Pre-configured for resource highlights:

AI 기초 개념

AI의 기본 개념을 쉽게 설명합니다

→자세히 보기

FrameworkCard

Pre-configured for framework and summary cards (matches AI Fluency design):

The AI Fluency Framework summary (16x9)

Quick visual reference for the four core competencies (the "4Ds") and key concepts. Can be used in delivering presentations.

Download

Usage Examples

Basic Usage

<CalloutBox
  title="Title Here"
  description="Description text"
  variant="purple"
/>

ResourceDownload Component

<ResourceDownload
  title="Research Paper"
  description="Our latest findings on AI safety"
  imageUrl="/img/research-icon.svg"
  primaryLink={{ 
    label: 'Read Online', 
    url: '/docs/paper', 
    icon: '📖' 
  }}
  secondaryLink={{ 
    label: 'Download PDF', 
    url: 'https://example.com/paper.pdf', 
    icon: '📥' 
  }}
  additionalLinks={[
    { label: 'Data', url: '#', icon: '📊' },
    { label: 'Code', url: '#', icon: '💻' }
  ]}
  colorNickname="jade"
/>

With Image and Links

<CalloutBox
  title="Resource Title"
  description="Description of the resource"
  imageUrl="/img/icon.svg"
  links={[
    { label: 'View', url: '/docs/resource', icon: '📖' },
    { label: 'Download', url: 'https://example.com/file.pdf', 
      icon: '📥', isExternal: true }
  ]}
  variant="mint"
/>

Custom Color

<CalloutBox
  title="Custom Colored Box"
  description="With any hex color"
  variant="custom"
  customColor="#e8f5e9"
/>

Using Color Nicknames

// Use friendly color names instead of variants
<CalloutBox
  title="Ocean Blue Box"
  description="Using the 'ocean' nickname"
  colorNickname="ocean"  // Same as variant="info"
/>

<CalloutBox
  title="Amethyst Purple Box"
  description="Using the 'amethyst' nickname"
  colorNickname="amethyst"  // Same as variant="purple"
/>

Color Reference

Default
"Heather"
#f5f5fa

Tip
"Sky"
#e8f4fd

Info
"Ocean"
#e1f5fe

Warning
"Sunset"
#fff3e0

Purple
"Amethyst"
#e6e1f5

Mint
"Jade"
#c3e9d8

Peach
"Salmon"
#f5d5c8

Lavender
#e8e3f5

Sage
#d4e8dc

Coral
#ffd4cc

Sand
#e4dacc

Typography & Font Colors

The site uses CSS variables for consistent typography colors that adapt to light and dark modes:

Text Color Variables

Primary Text

var(--ifm-font-color-base)

Light Mode

#1a1a1a

Dark Mode

#f0f0f0

Secondary Text

var(--ifm-font-color-secondary)

Light Mode

#333333

Dark Mode

#c8c8c8

Headings

var(--ifm-heading-color)

Light Mode

#000000

Dark Mode

#ffffff

Typography Examples

Heading 1 Example

Heading 2 Example

Heading 3 Example

Heading 4 Example

This is primary body text using var(--ifm-font-color-base).

This is secondary text using var(--ifm-font-color-secondary).

UI Element Colors

These colors are used for UI elements like borders, backgrounds, and subtle text:

Secondary

Light: #525252
Dark: #d0d0d0

Secondary Dark

Light: #424242
Dark: #c0c0c0

Secondary Darker

Light: #333333
Dark: #b0b0b0

Secondary Darkest

Light: #1a1a1a
Dark: #a0a0a0

Usage in CSS

/* Use CSS variables for consistent colors */
.myComponent {
  color: var(--ifm-font-color-base);
}

.myComponent h2 {
  color: var(--ifm-heading-color);
}

.myComponent .subtitle {
  color: var(--ifm-font-color-secondary);
}

/* UI element colors */
.myComponent .border {
  border-color: var(--ifm-color-emphasis-300);
}

.myComponent .subtle-bg {
  background-color: var(--ifm-color-emphasis-100);
}

Common Templates

Resource Download Box

Download Our Guide

Get our comprehensive guide to AI fundamentals.

📥Download PDF👁️View Online

Course Material Box

Course Materials

Access all course materials and resources in one place.

📊Slides✏️Exercises✅Solutions

Important Notice

⚠️ Important Update

Please note that this content has been updated. Review the changes before proceeding.

On this page