<!-- Hero CTA -->
<button class="c-button c-button--outline t-red c-hero__button js-hero-button qa-hero-button">Hero CTA</button>
// Button base
.c-button {}
// Button modifier with structural properties.
// In example: `border: 1px solid transparent; padding: 5px 10px;`
.c-button--outline {}
// Theme, which is scoped to button modifier.
// In example: `border-color: map-get($colors, “red”); color: map-get($colors, “red”);`
.c-button--outline.t-red {}
// Parent component hook. Very specific case/scenario.
// In example: `align-self: flex-end;`
.c-hero__button {}
// JavaScript selector hook
let heroButton = document.querySelector('.js-hero-button')
// QA selector hook
let heroButton = document.querySelector('.qa-hero-button')