|background & border color||$hover-primary||#30588c|
Content switchers have two states: selected and non-selected. Selected states are a solid color. There must always be only one selected state, no more, no less. Unselected options have a 1px border with no fill.
Content switcher text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. The text should not exceed three words.
|Class||Font-size (px/rem)||Font-weight||Type style|
|14 / 0.875||Normal / 400||-|
Content switchers must have at least two options for the user to choose from. Each container that makes up the content switcher is equal in size. The width of a container is determined by the length of the longest container option text plus the 32 px / 2rem on both sides of the text.
|Class||Property||px / rem||Spacing token|
|height||40 / 2.5||-|
|border, border-left, |
|padding-left, padding-right||32 / 2||$spacing-xl|