CHC Design System
Agenda
Banner
Banner - Without image
Block
Block - Text
Block - Image
Block - Page Navigation
Color
Events
Flow
Flow - Cream 50
Flow - Cream 100
Flow - Orange 500
Flow - Orange 700
Flow - Purple 100
Flow - Purple 650
Flow - Purple 700
Flow - Cream 150 to Purple 100
Flow - Purple 50 to Cream 150
Flow - Purple 50 to Cream 50
Footer
Header
Image
Image - Orange 500
Image - Purple 600
Input
Link
Link - Call to Action Link
Link - Minimal Call to Action Link
Navigation
Pagination
Section
Section - 1/2, 1/2
Section - 1/3, 2/3
Section - 2/3, 1/3
Section - Solid background
Section - Gradient background
Select
Size
Typography
Typography - Header Level 1
Typography - Header Level 2
Typography - Header Level 3
Typography - Subheader
Typography - Paragraph
Typography - Paragraph (Small)
Typography - Paragraph (Large)
Typography - Paragraph (Meta)
Typography - Blockquote
Demo
Notes
.html
.njk & context
Full Screen ↗
Link
TODO.
<
a
href
=
"
#
"
>
A link
</
a
>
{
{
c
(
"link"
,
{
"text"
:
"A link"
}
)
}
}