Spirit

Card

Lead paragraph

Section 1

Paragraph

Subheading A

Paragraph

Primary on light
Primary on dark
Code Copied
Copy Code 
<div class="spirit-container spirit-container--dark">
    <button class="spirit-button"> Donate </button>
</div>
  • Bullet
  • Bullet
  • Bullet

Subheading B

  • Bullet
  • Bullet
  • Bullet

Section 2

Paragraph

Code Reference

Color Tokens

Primary $spirit-text-color-primary #00081A AAA
On Dark $spirit-text-color-on-dark #ffffff AAA

Class Reference

Class Applies to Outcome

.spirit-button--secondary

.spirit-button

Applies secondary button style

.spirit-button--minimal

.spirit-button

Applies minimal button style

.spirit-button--toggle

.spirit-button

Use in place of a standard radio/checkbox group. See Toggle Button for specific implementation details on this custom component.