Component Status
Each component will go through phases in its lifecycle. Component statuses are listed below.
Status Descriptions#
| Name | Description | Label |
|---|---|---|
| Ready | This component is ready to use in production. | Ready |
| Beta | This component is fairly stable and is undergoing its final design and accessibility reviews. Minor changes could happen as a result of these reviews. | Beta |
| Alpha | Use with caution. This component is still under development. | Alpha |
Current component statuses#
| Component | Summary | Status |
|---|---|---|
| Accordion | An Accordion groups content into sections and can be expanded and collapsed by the user. | Component status:Ready |
| Alerts | An Alert displays brief, important and potentially time-sensitive information to users. | Component status:Ready |
| Back to Top | A shortcut button that helps users quickly navigate back to the top of long pages of content. | Component status:Ready |
| Breadcrumb | Shows the user’s current location in a page hierarchy and allows them to navigate back through them. | Component status:Ready |
| Breakpoints | Standardized values for media queries. | Component status:Ready |
| Buckeye Alert | A component for Buckeye Alert emergency messages. This will only be visible when there is an active alert message. | Component status:Ready |
| Buttons | A Button highlights the action a user can take. | Component status:Ready |
| Card | A Card displays content and an action about a single subject. | Component status:Ready |
| Container | A wrapper element to provide consistent horizontal alignment across regions on a page. | Component status:Ready |
| CTA Collection | Displays two or more calls-to-action that appear in a row | Component status:Ready |
| Factoid | A Factoid highlights a compelling, but brief numerical fact. | Component status:Ready |
| Favicon | Short for “favorite icon”, a Favicon is a small branded icon that appears in a browser tab. | Component status:Ready |
| Featured Card | With high visual emphasis, a Featured Card displays content and an action about a single subject. | Component status:Ready |
| Fonts | Our brand fonts, Buckeye Serif 2 and Buckeye Sans 2, are available as web fonts and built directly into BUX. | Component status:Ready |
| Forms | Forms are used for used for collecting user input and use a variety of form elements. | Component status:Ready |
| Grid | A 12-column responsive grid with support for automatic-width and ratio-based columns. | Component status:Ready |
| Headings | Headings represent the key concepts, ideas and supporting ideas in the content of a webpage. | Component status:Ready |
| Hero | With high visual emphasis, a Hero displays content and an action about a single subject. | Component status:Ready |
| Horizontal Rule | A Horizontal Rule serves as a visual separator for content. | Component status:Ready |
| Image | Image aspect ratio guidelines help preserve the image composition that the photographer organized when shooting the photo. | Component status:Ready |
| Link | Links connect a user to a different page or further information. | Component status:Ready |
| Link List | A Link List organizes a scannable list of links with optional descriptions. | Component status:Ready |
| List | A List vertically organizes related content. | Component status:Ready |
| Listicle | Listicle displays a list within a news article or story in a scannable format. | Component status:Ready |
| Menu | A menu helps the user navigate to main sections of the website. | Component status:Ready |
| Menu with Search | An alternative version of the menu that includes site search. | Component status:Ready |
| OSU Navbar | OSU navbar is a common element among all Ohio State websites. | Component status:Ready |
| Pagination | Pagination is used to navigate from page to page in paginated content, with a control for navigating to the next or previous page. | Component status:Ready |
| Panel | A Panel provides a light gray background, adding visual emphasis to a group of components. | Component status:Ready |
| Primary Colors | Our primary palette consists of scarlet (red), gray and white. | Component status:Ready |
| Question + Answer | Question and Answer is a series of interview questions and answers within a news article or story in a scannable format. | Component status:Ready |
| Quote | A Quote displays an impactful quotation from a person, like students, alumni, faculty or another source. | Component status:Ready |
| Sidebar Navigation | Sidebar Navigation compliments a Menu by displaying “sub-content” vertically on the left side of a webpage. | Component status:Ready |
| Site Footer | The Site Footer contains contact, privacy, accessibility, copyright information and social media links relevant to the website. | Component status:Ready |
| Site Header | The Site Header contains the college or unit’s identity, along with optional elements. | Component status:Ready |
| Skip Navigation | The Skip Navigation component is added to the top of pages to allow keyboard and assistive technology users to jump to the main content in the page. | Component status:Ready |
| Social Media Links | A collection of links to social media accounts. | Component status:Ready |
| Spacing | A set of global spacing values that can be applied via utility classes or as Sass Variables. | Component status:Ready |
| Table | A table is used to display tabular data in rows and columns. | Component status:Ready |
| Tabs | Tabs organize related content, allowing the user to switch between groups of content on the same page. | Component status:Ready |
| Tile | A Tile groups an either an icon or image with tile text into a single clickable component. | Component status:Ready |
| Timeline | A Timeline displays a series of milestones with descriptions in chronological order. | Component status:Ready |
| Type Size | A set of global type size values that can be applied via utility classes or as Sass Variables. | Component status:Ready |
| UI Icons | UI icons are used to guide actions within websites or apps, while standard icons are used to visually convey a concept. | Component status:Ready |
| Utility Colors | Utility colors are only to be used to indicate a status to the user, such as an Alert or the hover state of a visited inline link. | Component status:Ready |