Component Library

Index
ButtonsTypographyContainerCardQuote Card

Buttons

Primary
Secondary
Link
Disabled
Default
Talk to an Expert
Class name: (DR / CTA / primary)
Icon-left
Button
Class name: (DR / CTA / primary) & (icon-left)
Icon-right
Class name: (DR / CTA / primary) & (icon-right)
Default
Class name: (DR / CTA / primary)
Icon-left
Class name: (DR / CTA / primary) & (icon-left)
Icon-right
Class name: (DR / CTA / primary) & (icon-right)
Default
Button
Class name: (DR / CTA / secondary)
Icon-left
Button
Class name: (DR / CTA / secondary) & (icon-left)
Icon-right
Button
Class name: (DR / CTA / secondary) & (icon-right)
Default
Button
Class name: (DR / CTA / secondary)
Icon-left
Button
Class name: (DR / CTA / secondary) & (icon-left)
Icon-right
Button
Class name: (DR / CTA / secondary) & (icon-right)
Default
Class name: (DR / CTA / link)
Icon-left
Class name: (DR / CTA / link) & (icon-left)
Icon-right
Class name: (DR / CTA / link) & (icon-right)
Default
Button
Class name: (DR / CTA / link)
Icon-left
Button
Class name: (DR / CTA / link) & (icon-left)
Icon-right
Button
Class name: (DR / CTA / link) & (icon-right)
Default
Button
Class name: (DR / CTA / disabled)
Icon-left
Button
Class name: (DR / CTA / disabled) & (icon-left)
Icon-right
Button
Class name: (DR / CTA / disabled) & (icon-right)
Default
Class name: (DR / CTA / disabled)
Icon-left
Class name: (DR / CTA / disabled) & (icon-left)
Icon-right
Class name: (DR / CTA / disabled) & (icon-right)

Typography

Headers

H1
H2
H3
H4
Bold Large
Bold Small
Table
SubHeader
Blog

Used on:

Class Name: (DR / H1)

Aa

Poppins Semi Bold

Size 72px / 5rem

Line height: 80px / 5rem

Class Name: (DR / H1) & (white)

Aa

Poppins Semi Bold

Size 72px / 5rem

Line height: 80px / 5rem

Used on:

Class Name: as above

Aa

Poppins Semi Bold

Size 32px / 2rem

Line height: 44px / 3rem

Aa

Poppins Semi Bold

Size 32px / 2rem

Line height: 44px / 3rem

Used on:

Class Name: (DR / H2)

Aa

Poppins Semi Bold

Size: 44px / 3rem

Line height: 56px / 4rem

Class Name: (DR / H2) & (white)

Aa

Poppins Semi Bold

Size: 44px / 3rem

Line height: 56px / 4rem

Used on:

Class Name: as above

Aa

Poppins Semi Bold

Size: 24px / 1.5rem

Line height: 32px / 2rem

Aa

Poppins Semi Bold

Size: 24px / 1.5rem

Line height: 32px / 2rem

Used on:

Class Name: (DR / H3)

Aa

Poppins Semi Bold

Size 32px / 2rem

Line height: 44px / 3rem

Class Name: (DR / H3) & (white)

Aa

Poppins Semi Bold

Size 32px / 2rem

Line height: 44px / 3rem

Used on:

Class Name: as above

Aa

Poppins Semi Bold

Size 20px / 1.3rem

Line height: 32px / 2rem

Aa

Poppins Semi Bold

Size 20px / 1.3rem

Line height: 32px / 2rem

Used on:

Class Name: (DR / H4)

Aa

Poppins Semi Bold

Size 25px / 1.6rem

Line height: 36px / 2rem

Class Name: (DR / H4) & (white)

Aa

Poppins Semi Bold

Size 25px / 1.6rem

Line height: 36px / 2rem

Used on:

Class Name: as above

Aa

Poppins Semi Bold

Size 16px / 1rem

Line height: 25px / 1.6rem

Aa

Poppins Semi Bold

Size 16px / 1rem

Line height: 25px / 1.6rem

Used on:

Class Name: (DR / text / bold) & (large)

Aa

Poppins Semi Bold

Size 30px / 1.3rem

Line height: 44px / 3rem

Class Name: (DR / text / bold) , (large) & (white)

Aa

Poppins Semi Bold

Size 30px / 1.3rem

Line height: 44px / 3rem

Used on:

Class Name: as above

Aa

Poppins Semi Bold

Size 20px / 1.3rem

Line height: 32px / 2rem

Aa

Poppins Semi Bold

Size 20px / 1.3rem

Line height: 32px / 2rem

Used on:

Class Name: (DR / text / bold) & (small)

Aa

Poppins Semi Bold

Size 16px / 1rem

Line height: 25px / 1.6rem

Class Name: (DR / text / bold), (small) & (white)

Aa

Poppins Semi Bold

Size: 16px / 1rem

Line height: 25px / 1.6rem

Used on:

Class Name: N/A

N/a

Poppins Semi Bold

Size N/A

Line height: N/A

N/A

Poppins Semi Bold

Size: N/A

Line height: N/A

Used on:

Class Name: (DR / Text / Table)

AA

Poppins Semi Bold

Size: 16px / 1rem

Line height: 25px / 1.6rem

Class Name: (DR / Text / Table) & (white)

AA

Poppins Semi Bold

Size: 16px / 1rem

Line height: 25px / 1.6rem

Used on:

Class Name: N/A

N/A

Poppins Semi Bold

Size: N/A

Line height: 25px / 1.6rem

N/A

Poppins Semi Bold

Size: N/A

Line height: N/A

Used on:

Class Name: (DR / SubHeader)

AA

Poppins Light (Capitalised)

Size 18px / 1.1rem

Line height: 28px / 1.8rem

Class Name: (DR / SubHeader) & (white)

AA

Poppins Semi Bold

Size 18px / 1.1rem

Line height: 28px / 1.8rem

Used on:

Class Name: N/A

N/A

Poppins Light (Capitalised)

Size N/A

Line height: N/A

N/A

Poppins Semi Bold

Size N/A

Line height: N/A

Used on:

Class Name: (DR / blog / H1)

Aa

Poppins Semi Bold

Size 40px / 2.5rem

Line height: 52px / 3.25rem

Class Name: (DR / blog / H1) & (white)

Aa

Poppins Semi Bold

Size 40px / 2.5rem

Line height: 52px / 3.25rem

Used on:

Class Name: N/A

Aa

Poppins Semi Bold

Size 32px / 2rem

Line height: 44px / 3rem

Aa

Poppins Semi Bold

Size 32px / 2rem

Line height: 44px / 3rem

Other Typography

Paragraph

Used on:

Class Name: (DR / paragraph)

Aa

Main body of text, paragraphs

Poppins Light

Size: 16px / 1rem

Line height: 25px / 1.6rem

Aa

Main body of text, paragraphs

Poppins Light

Size 16px / 1rem

Line height: 25px / 1.6rem

Productive styles

Used on:

Class Name: (DR / label / caption)

Aa

This is for field labels in components and error messages
For captions or legal content in a layout

Poppins Light

Size 15px / 0.9rem

Line height: 25px / 1.6rem

Class Name: (DR / label / caption) & (white)

Aa

This is for field labels in components and error messages
For captions or legal content in a layout

Poppins Light

Size 15px / 0.9rem

Line height: 25px / 1.6rem

Button

Used on:

Class Name: (DR / label / caption)

Aa

This is for button labels

Poppins Light

Size 18px / 1.1rem

Line height: 28px / 1.8rem

Aa

This is for button labels

Poppins Light

Size 18px / 1.1rem

Line height: 28px / 1.8rem

Container

A container with max-width: 1300px limits content width for better readability and a balanced layout on large screens, while keeping the design responsive and centered on smaller screens. Don't just copy the box below, type in DR / Container in the style selector on the right tool box.

Class Name: (DR / container)

Cards

Class Name: (DR / card)

Class Name: (DR / card) & (alternative)

Quote Card

"Driftrock customers saw a 210% increase in EV leads from the Driftrock Automotive Publisher Network."
Talk to an Expert