Styleguide

Components

All component pages have a living example and code snippets for HTML, CSS, and JavaScript (if needed). Select an option in the left sidebar to get started.

Example


Here is an example component

Code

HTML

<div class="component-wrapper">
  <p class="component-text">Here is an example component</p>
</div>
1
2
3

CSS

.component-wrapper {
  background-color: #00274c;
  color: #fafafa;
  padding: 1rem;
}

.component-wrapper.clicked {
  background-color: #ffcb05;
  color: #00274c;
}

.component-text {
  font-size: 1.25rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

JavaScript

const componentWrapper = document.querySelector(".component-wrapper");

componentWrapper.addEventListener("click", () => {
  componentWrapper.classList.toggle("clicked");
});
1
2
3
4
5