<pfe-cta> demo page

Note that color attributes override any dark or saturated context information.

CTAs in light containers

No color attribute

Default Primary Secondary Secondary + wind variant Disabled

color="base"

Default Primary Secondary Secondary + wind variant Disabled

color="accent"

Default Primary Secondary Secondary + wind variant Disabled

CTAs in dark containers

No color attribute

Default Primary Secondary Secondary + wind variant Disabled

color="base"

Default Primary Secondary Secondary + wind variant Disabled

color="accent"

Default Primary Secondary Secondary + wind variant Disabled

CTAs in saturated containers

No color attribute

Default Primary Secondary Secondary + wind variant Disabled

color="base"

Default Primary Secondary Secondary + wind variant Disabled

color="accent"

Default Primary Secondary Secondary + wind variant Disabled

Force wrap to test arrow line-wrap

Default link cta with longer text

Link and button styles (displayed inline)

Link Link Link Link

Old school testing (custom backgrounds)

Custom saturated band with broadcast vars

Color responsive

Default Primary Secondary

Color override

Primary accent Secondary accent Primary lightest Secondary + wind variant

Custom dark band with custom broadcast variables

Color responsive

Default Primary Secondary

Color override

Primary accent Secondary accent Primary complement Secondary complement Primary lightest Secondary + wind variant