Component guide

Color

• static1 · Green

  --color-static1 · #315C4C
• static2 · Beige

  --color-static2 · #E8DDC8
• static3 · Yellow

  --color-static3 · #E8B94F
• back · Ivory

  --section-bg1 · #F8F6F0
• back · White

  --color-bg · #FFFFFF
• font1

  --color-font1 · #262626
• font2

  --color-font2 · #404040
• font3

  --color-font3 · #737373
• font4

  --color-font4 · #999999
• border2

  --color-border2 · #E0E0E0

Typography · DM Sans

• Display

  .display · 64 / 700 / 1.1

  Empowering Children

• H1

  .h1 · 48 / 700 / 1.25

  Empowering Children

• H2

  .h2 · 36 / 600 / 1.3

  Empowering Children

• H3

  .h3 · 28 / 600 / 1.4

  Empowering Children

• H4

  .h4 · 20 / 500 / 1.5

  Empowering Children

• Body L

  .body-l · 18 / 500 / 1.6

  Empowering Children

• Body M

  .body-m · 16 / 500 / 1.5

  Empowering Children

• Body S

  .body-s · 14 / 400 / 1.7

  Empowering Children

• Caption

  .caption · 12 / 500 / 1.5

  Empowering Children

• GNB

  .gnb-txt · 16 / 500 / 1.5

  Empowering Children

Button

Round · .round-btn

Square · .square-btn

Send Message .square-btn.main-btn.full
Donate with PayPal .square-btn.line-btn.full.paypal-btn

Text · .txt-btn

Tab

Pill tab · .pill-tab

Badge

Form

Name

Email

Please enter a valid email address.

Subject General inquiry Volunteering Partnership

Message

Search

Dropdown

Select a program

• Health
• Nutrition
• Education & Scholarships

Send Message

Checkbox · Radio · Switch

Donation amount · .radio-chip + PayPal

Donation amount

$25

$50

$100

Other

Donate with PayPal

Table · Pagination

FAQ · Modal