Trials and demos
How to buy

Card (legacy) and Container-Elastic

Scenario : Default Variation (unstyled, no image, no shadow), inside Container-Elastic

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced
Scenario : Default Variation (unstyled, no image, no shadow), inside Container-Elastic, Container-Elastic (Flex-Center)

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.
Scenario : Default Variation (unstyled, no image, no shadow), inside Container-Elastic, Container-Elastic (center alignment)

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.
Variation : Card (legacy) inside Container-Elastic, Container-Elastic set to (Product Image, Drop-shadow)

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Variation : Card (legacy) inside Container-Elastic, Container-Elastic set to (Icon +Drop-shadow)

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Variation : Card (legacy) inside Container-Elastic, Container-Elastic set to (Logo +Drop-shadow)
Variation : Card (legacy) inside Container-Elastic, Container-Elastic set to (Bleed Image +Drop-shadow)

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Variation : CTA types with Card (legacy) inside Container-Elastic

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Secondary CTA Secondary Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Text CTA Text Reduced

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Open link in new tab No follow

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Is login URL External Link Download Link
Variation : Pre-title +Statistical Information +Badge Label inside Container-Elastic
Badge 1

Pre title text goes here

Prefix 75 Suffix

Subhead character count with 60

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Badge 2

Pre title text goes here

(-) 75 %

Subhead character count with 60

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Variation : Light Theme (Container-Content), Card (legacy) inside Container-Elastic

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Variation : Light Theme (Container-Content), Card (legacy) inside Container-Elastic, Container-Elastic set to (Drop-shadow)

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Variation : Dark Theme (Container-Content), Card (legacy) inside Container-Elastic

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Variation : Dark Theme (Container-Content), Card (legacy) inside Container-Elastic, Container-Elastic set to (Drop-shadow)

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text
Scenario : All styles in one place inside Container-Elastic
Note that Card (legacy) styles are unsupported for official use

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Card (V2) Default Title

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

Primary CTA Primary Reduced

Pre title text goes here

Prefix 75 Suffix

Subhead character count with 60

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text

Pre title text goes here

(-) 75 %

Subhead character count with 60

Nunc vitae turpis in nibh eleifend tincidunt. Nulla facilisi. Nam risus magna, vestibulum sit amet feugiat vel.

CTA Text