Theme Colors

#FF2841

brand-1-bright

#E3173E

brand-1-prime

#A21C1D

brand-1-dark

#62C7FF

brand-2-bright

#0D9BE4

brand-2-text

#007EC0

brand-2-prime

#00447D

brand-2-dark

#707070

brand-lightGray

#4A4A4A

brand-gray

#1B1B1B

brand-black

#FFFFFF

white

#000000

black

Component: bnpcard

Original Component
2023
Original Component
Electrified

Title One

Title Two

Variant: SRP

2023
Variant: Classic

From

$0

MSRP Starting from

$22,899 + tax & lic
Build Now
2023
Honda Civic Type R

Variant: Advanced

From

$0

Starting at:

$22,899 + tax & lic
Build & Price Search Inventory

Component: vehicle

Vehicle Image Original Component
2024 Honda Civic Type R

LFWD

Finance for

$347/Month

Lease for

$327/Month

Dealer Price

$22,899 + tax & lic
Vehicle Image Variant: Classic
2023 Honda Civic Type R

LFWD

Mileage

11,000 KM

Stock #

B56786

VIN

VU76564N987

Transmission

Automatic

Dealer Price

$22,899 + tax & lic
Vehicle Image Variant: Classic (with Base Features)
2023 Honda Civic Type R

LFWD

Mileage

11,000 KM

Stock #

B56786

VIN

VU76564N987

Transmission

Automatic

Dealer Price

$22,899 + tax & lic
Vehicle Image Sub-variant: Classic Shaded
2024 Honda Civic Type R

LFWD

Finance for

$347/Month

Lease for

$327/Month

Dealer Price

$22,899 + tax & lic

Component: cta

Over Title

Main Title

Over Title

Main Title

Secondary Black

Secondary Brand-2

Secondary Black

Secondary Black

Sub-Variant: tall

sub: tall

Main Title

sub: tall

Main Title

sub: tall

Main Title

sub: tall

Main Title

sub: tall

Main Title

Variant: Stacked

Variant Stacked

Main Title

Variant Stacked: brand-2

Main Title

Variant Stacked: black

Main Title

Sub-Variant: Tall

Variant Stacked

Class: Tall

Variant Stacked: brand-2

Class: Tall

Variant Stacked: black

Class: Tall

Variant Stacked: Postcard

Main Title

Variant Stacked: Blog

Article Title
Other Variants

Iconic Title

Variant: Lightcard

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Variant: Capsule

Cta Sub Title

Component: button

Variant: brand
Variant: btn-ui
Variant: btn-outline
Variant: btn-ui-nav
Variant: radio-button
Variant: pill
Variant: btn-small

Component: link

Link Text
Link small
Label Link Label
Link: link_select Link: link_select
Variant: box
Link: box Link: link_box-2
Variant: main
Link: main
Variant: pill
Link: pill

Component: forms

Input Element
Select Element
Textarea Element

Macro: Tooltip

Large tooltip size. Positioned to start at center and collapse on mobile to stay center.

Component: accordion

Variant: accordion styled
Accordion Styled
  • Feature List Item One
  • Feature List Item Two
  • Feature List Item Three
  • Feature List Item Four
  • Feature List Item Five
  • Feature List Item Six

Macro: address & department phones

2040 Street Rd , Anytown , ON , A1A 1A1
Department Name
999-111-2345
999-111-2346
999-111-2347

Component: payment

Finance from
-- / Month
Variant: card
-- / Month
84 Months @ 6.99%
Sub-variant: payment-card-plain
-- / Month
84 Months @ 6.99%

Variant: Advanced

Small tooltip size. Positioned to start on the right and collapse on mobile to stay right.
-- /Month
84 Months @
6.99%

Macro: priceItem

Dealer Price
$45,678.00 plus tax & fees
Seasonal Discount
- $6,000.00 class: focused

Component: feature

Feature Name

Feature Value

Variant: basic

Feature Value

Variant: small

Feature Value

Sub-variant: small special

Feature Value

Variant: classic

Variant: classic

Feature Value

Sub-variant: classic special

Feature Value

Variant: classic table

Body Style

Pickup Truck

Fuel Type

Gasoline

Doors

4-Door

Transmission

Automatic

Class: card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Component: popup (inside Component: button)

Popup Button

Component: callout

Callout with Panel
Callout

+Base Subtitle

Description for the Base Panel. A Bit of a longer description than usual.

btn-brand-1 btn-outline-ui-0

Callout with Panel
Callout - Splay Right

+Base Subtitle

Description for the Base Panel. A Bit of a longer description than usual. Let us make this one very long that way we can see how it wraps to the next line

btn-brand-1 btn-outline-ui-0
Variant: hero

Callout with Panel
Hero Slider

+Base Subtitle

Description for the Base Panel

btn-brand-1 btn-brand-2
Sub-Variant: hero classic-callout

Callout with Panel
Classic Callout

No Bars

Description for the Base Panel

Callout: no-panel
Hero Image

Typography: text

Extra Small (textXs)

Font Weight Normal

Font Weight Medium

Font Weight Bold

Small (textSm)

Font Weight Normal

Font Weight Medium

Font Weight Bold

Base (textBase)

Font Weight Normal

Font Weight Medium

Font Weight Bold

Extra Large (textXl)

Font Weight Normal

Font Weight Medium

Font Weight Bold

Two Extra Large (text2xl)

Font Weight Normal

Font Weight Medium

Font Weight Bold

Three Extra Large (text3xl)

Weight Normal

Weight Medium

Weight Bold

Four Extra Large (text4xl)

Normal

Medium

Bold

Five Extra Large (text5xl)

Normal

Medium

Bold