Atoms

Atoms!!!

Atoms are the smallest, most reusable elements in your system. They don’t stand on their own as full sections, but they form the foundation for everything else you’ll build. Buttons, headings, icons, images, labels, and simple dividers all fall into this category. These elements establish the visual language of the site—spacing, typography, color, and interaction—so that larger components stay consistent no matter where they’re used. This page gives you a quick look at each atom in its simplest form before you see how they’re combined in more complex components.

Some will be demoed inside of their organism.

Accordion Item

A single expandable row used inside an accordion to reveal or hide supporting content. Container within an accordion

Whole lot of stuff can go here

Whole lot of stuff can go here

Whole lot of stuff can go here

Button

A clickable element used to trigger actions or link users to key pages. As part of a Button Group

Divider

A simple horizontal rule that separates content and improves visual structure.

Heading

A styled text element that establishes hierarchy and guides readers through the page. These will probably look unstyled.

Here's an h2

Here's an h3

Icon

A small visual marker used to reinforce meaning, draw attention, or support navigation. Utilizes custom FontAwesome integration, and is ready for your custom icons asa well.

Image

A standalone visual element used to add context, illustrate ideas, or support storytelling.

Label (Pill)

A compact badge used to highlight categories, statuses, or key metadata. As part of the Label Group

Video

An embedded media block for showcasing motion content, presentations, or demonstrations. Utilizes Antenna for Youtube or Vimeo embeds, and video tag for uploads.

Spacer

An easy way to add space between elements

Here's a heading

Here's a heading

Anchor Link

Though invisible, these are an easy way to add anchor links to a page for easy navigation.