Rochester Core
Tab component
Explore documentation around Rochester Core’s Tab component.
1. How-to video: Tab component
2. Tab options
After selecting the tab component on any page that uses the Rochester Core, you’ll be presented with the following options to customize the display and enter content.
The title field is where to add the title or the heading for the entire tab component. Keep in mind titles for specific tabs will be added later. Styling the header as an H2 is recommend.
The background color selector is where to choose the background color of the entire tab component. This color will serve as the backdrop for your tabs.
There are two ways to display the tabs:
- Horizontal: Choose ‘Horizontal’ for a left-to-right arrangement, supporting three tabs or more.
- Vertical: Choose ‘Vertical’ for a top-to-bottom stack, supporting 3-6 tabs.
Adding tabs
Enter a brief overline text that appears above the tab title. Use this for labels or categorization.
Enter your tab title here. For best results, we recommend using H2 or H3 styling for clear emphasis.
Add supporting text for the tab. For clarity, use paragraph styling for detailed information or bullet lists for concise points. Keep text concise (400 characters max) to ensure readability and scannability. Focus on high-level insights and key takeaways.
Choose an image to visually represent this tab. Recommended image dimensions: Vertical orientation: 840px by 840px (1:1), with a centered focal point for optimal display. Horizontal orientation: 1216px by 840px (3:2), with a centered focal point for optimal display.
Choose where the image will be positioned on the tab to best fit your content layout. (Left or Right)
3. Example tab component
Explore demos of the tab component below. You can create horizontal or vertical versions with gray, navy, or charcoal backgrounds.