Tabs
The Tabs content type allows you to organize related information into separate sections that visitors can navigate without leaving the page. Tabs are useful when you have several topics to cover but do not want to display all the content at once. They can help organize longer pages and make it easier for visitors to find the information they need.
Three tab styles are available: Horizontal Tabs with Images, Vertical Tabs and Text-Only Tabs. Horizontal Tabs with Images allow you to combine text, images and optional buttons to highlight related content. Vertical Tabs are a good option for organizing larger amounts of information into clearly defined sections. Text-Only Tabs provide a simpler layout for presenting related information without images.
Horizontal Tabs with Images require large, high-quality images that are at least 2,500 pixels wide. Smaller images may appear blurry or pixelated, particularly on larger screens. Choose images that are relevant to the content and have enough space around the main subject to accommodate cropping at different screen sizes.
When using tabs, give each tab a short, descriptive title so visitors know what information they will find. Keep related content grouped together and avoid placing important information inside tabs where visitors might overlook it. Tabs work best when the content is closely related and visitors are likely to want to compare or move between sections.
See examples of each tab style below.
Horizontal Tabs - White Background
Organize content into up to 7 horizontal tabs.
About Mines
/filters:format(webp)/prod01/mines/media/minesedu/admin-media/mines-webpages/Mines-B3610Guggenheim-Hall..jpg)
About Mines
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
About Mines
Living in Golden
/filters:format(webp)/prod01/mines/media/minesedu/admin-media/mines-webpages/golden/Mines-Student-Welcome-to-Golden-1724_CSM-2021.01_6283.jpg)
Living in Golden
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Living in Golden
Academics
/filters:format(webp)/prod01/mines/media/minesedu/admin-media/mines-webpages/homepage/Nuclear-Science-Engineering-Grad-Student.jpg)
Academics
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Academics
Horizontal Tabs - Blue Background
Organize content into up to 7 horizontal tabs.
About Mines
About Mines
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Living in Golden
Living in Golden
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Academics
Academics
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Horizontal Tabs - Gray Background
Organize content into up to 7 horizontal tabs.
About Mines
About Mines
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Living in Golden
Living in Golden
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Academics
Academics
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
Vertical Tabs
Vertical Tabs organize related content into a clean layout with up to 15 tabs and featured images. Includes a section title and brief introduction (one sentence recommended).
Tab Title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Title 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Title 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
/filters:format(webp)/prod01/mines/media/minesedu/admin-media/program-pages-and-finder/program-finder-photos-/Statistics-UG-Minor.jpg)