A byproduct of the Style Guide; a Component Library is a collection of the combined atomic elements that make up the site and become modules and components. Ensuring consistency across the site can be extremely difficult. Component Libraries aim to quell that arduous effort. By providing pre-compiled elements, components, and modules - displaying how they are formed and used provides a benefit to developers who are coming into the project after it has started, or possibly taking over a project as a whole.
Tile List Component
About Forms
// need some text here
Forms* Indicates a required field
Video: Local
Operational Message
Above
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis neque assumenda nulla vitae libero earum facere. Eius, explicabo, rerum amet molestiae laudantium fugiat incidunt minima temporibus voluptas nam officia itaque ipsa maxime neque repellendus necessitatibus delectus quam eligendi at perferendis expedita a laborum! Quibusdam, provident quo quasi tooltipIt's a hint! iis minus suscipit distinctio magni quas consequatur tempore ab magnam nulla labore recusandae ea dignissimos nemo blanditiis minus suscipit distinctio magni quas consequatur deleniti quam ullam odio culpa eius doloremque saepe nihil praesentium numquam voluptas dolores optio debitis soluta harum et quod dolor! Perspiciatis, et, nulla, doloremque vel velit nemo nobis dolorum facere voluptatum officiis culpa rem doloribus id animi.Below
Lorem ipsum dolor sit amet, consectetur adipisicing tooltipIt's a hint! iis minus suscipit distinctio magni quas consequatur elit. Quis neque assumenda nulla vitae libero earum facere. Eius, explicabo, rerum amet molestiae laudantium fugiat incidunt minima temporibus voluptas nam officia itaque ipsa maxime neque repellendus necessitatibus delectus quam eligendi at perferendis expedita a laborum! Quibusdam, provident quo quasi tempore ab magnam nulla labore recusandae ea dignissimos nemo blanditiis minus suscipit distinctio magni quas consequatur deleniti quam ullam odio culpa eius doloremque saepe nihil praesentium numquam voluptas dolores optio debitis soluta harum et quod dolor! Perspiciatis, et, nulla, doloremque vel velit nemo nobis dolorum facere voluptatum officiis culpa rem doloribus id animi.-
This is a really long alert. This is a really long alert. This is a really long alert. This is a really long alert. This is a really long alert.
-
Unsupported Browser: You are using an unsupported browser version. Some features on our website may not be available. To get the most out of our website, we recommend you upgrading to the latest version of your Chrome, Safari, Firefox, or Internet Explorer
Pagination
Accordion Component
for 12 mos.
Dialog / Modal
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, quaerat, incidunt, ratione minus blanditiis ipsum ducimus eum commodi reiciendis atque dolores cumque eaque? Qui, voluptate, quis nisi accusamus voluptatem distinctio nemo facere labore error tenetur veniam id rerum quisquam recusandae aspernatur quam in. Eligendi, sit, sunt provident atque dicta illo dolorem adipisci voluptatum quis velit ratione nam libero necessitatibus nisi optio officia debitis voluptatem dolorum fugit voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, quaerat, incidunt, ratione minus blanditiis ipsum ducimus eum commodi reiciendis atque dolores cumque eaque? Qui, voluptate, quis nisi accusamus voluptatem distinctio nemo facere labore error tenetur veniam id rerum quisquam recusandae aspernatur quam in. Eligendi, sit, sunt provident atque dicta illo dolorem adipisci voluptatum quis velit ratione nam libero necessitatibus nisi optio officia debitis voluptatem dolorum fugit voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, quaerat, incidunt, ratione minus blanditiis ipsum ducimus eum commodi reiciendis atque dolores cumque eaque? Qui, voluptate, quis nisi accusamus voluptatem distinctio nemo facere labore error tenetur veniam id rerum quisquam recusandae aspernatur quam in. Eligendi, sit, sunt provident atque dicta illo dolorem adipisci voluptatum quis velit ratione nam libero necessitatibus nisi optio officia debitis voluptatem dolorum fugit voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, quaerat, incidunt, ratione minus blanditiis ipsum ducimus eum commodi reiciendis atque dolores cumque eaque? Qui, voluptate, quis nisi accusamus voluptatem distinctio nemo facere labore error tenetur veniam id rerum quisquam recusandae aspernatur quam in. Eligendi, sit, sunt provident atque dicta illo dolorem adipisci voluptatum quis velit ratione nam libero necessitatibus nisi optio officia debitis voluptatem dolorum fugit.
Scroll to topBox Column Component
Tabs
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.
Tab 2 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, enim, dolor! Reiciendis, corporis, laudantium, odio illo dolores numquam eligendi expedita assumenda eaque doloremque quidem quam nam qui ducimus delectus nemo?
Tab 3 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.
Tab 4 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.
Tab 5 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.
Tables
One of the most semantic elements in the framework; the table is here mostly so we don't have to look up the best practices for marking them up when needed. We have a few different methods for making tables responsive, but had no intention of commiting to one in the Pattern Library.
Items | Qty | Price-point | |
---|---|---|---|
Envisioning Information By Edward R. Tufte – Hardcover | In Stock | 1 | $33.32 |
Outliers By Malcolm Gladwell – Hardcover | In Stock | 2 | $33.58 ($16.79 × 2) |
Don’t Make Me Think By Steve Krug – Paperback | Out of Stock | 1 | $22.80 |
Steve Jobs By Walter Isaacson – Hardcover | In Stock | 1 | $17.49 |
Subtotal | $107.19 | ||
Tax | $10.71 | ||
Total | $117.90 |
About Column Control
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quisquam ipsum odio officia, aut quo nostrum laudantium. Repellendus, facilis libero asperiores alias dolorem iure, labore ducimus at excepturi cupiditate facere similique, maxime ipsam ex.
Responsive Breakpoints- Mobile: Up to 640px or 40em
- Tablet: 640px - 768px or 48em
- Desktop: 769px+