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
Account & Billing
TV
InternetAbout Forms
// need some text here
Forms* Indicates a required field
Video: Local
Operational Message
- We regularly negotiate new programming contracts with local broadcasters
- Us regularly negotiate new programming contracts with local broadcasters
- You regularly negotiate new programming contracts with local broadcasters
- I regularly negotiate new programming contracts with local broadcasters
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 top
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 repudiandae eum eius quaerat error consectetur omnis labore fuga quo molestias non quas officiis nesciunt delectus. Totam, at, aperiam, fugiat, quam cumque quasi veritatis vel dolorum rerum odio perferendis facere obcaecati facilis officiis id vitae necessitatibus suscipit sit error odit iure tempore optio velit eos dolores doloremque aspernatur accusantium excepturi sint esse explicabo a ad eaque natus non quia praesentium. Libero, ab, iusto placeat maiores unde atque beatae sunt hic quibusdam repudiandae voluptates facere maxime laudantium illo rerum suscipit facilis quidem laborum odio consequuntur repellendus numquam in! Veniam, quasi dolor enim expedita unde. Eligendi, nesciunt voluptas eos temporibus doloribus atque sint. Quae, magni, eveniet, perferendis, voluptatum animi ullam ratione reprehenderit autem enim quidem corporis deleniti iste praesentium molestiae consequuntur pariatur esse id ipsam tenetur quaerat accusantium deserunt sed rerum corrupti unde ipsa aspernatur nulla ex ab nisi incidunt doloremque numquam est nostrum ad cum suscipit. Ut, nobis, similique, sunt commodi harum totam quibusdam alias illo cumque repellendus sequi assumenda deleniti quo saepe iste laborum modi voluptatum quam nostrum placeat dolorum ipsa dolores esse. Alias, nam, minus obcaecati in odit doloremque nobis dignissimos beatae blanditiis veniam ipsum nesciunt cumque architecto praesentium ea repellat perspiciatis qui debitis neque ut odio eaque laudantium reiciendis dolor similique hic provident quod nostrum autem tenetur pariatur aut repellendus dicta! Rem, atque, dolorem alias odit id dicta unde accusamus delectus minus ratione quis ipsa possimus iusto. Repudiandae, vel, nemo, saepe, reprehenderit ipsa provident alias aspernatur ducimus id blanditiis illum dicta optio asperiores unde quia rem earum a recusandae odit dolores! Beatae, nam, autem expedita a sapiente doloremque delectus officia eligendi. Magnam, fugiat, velit facilis cumque ab nostrum cupiditate voluptatum dolorem provident porro reiciendis doloremque accusantium harum aliquam quo. Maiores, magni, odit rem sed possimus neque sapiente dolorum unde nam expedita voluptas facere assumenda inventore sit eaque itaque nulla numquam! Obcaecati, alias, odio, numquam molestiae consequuntur totam minus ipsam autem nisi repellendus nostrum fugiat consequatur ratione velit eum temporibus praesentium?
Box 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+