Vertical Tabs
A container to organize content blocks into sections visible when a tab is selected.
| Category | CMS |
|---|---|
| Interaction | Cascade, WordPress |
Instructions
Note: Add tabs. For sites on Purdue server, you may see an error: “This block contains unexpected or invalid content.” This is because of the ARIA attribute support of WordPress. Please hit “Attempt Block Recovery” to recover the block.
Options:
- Number of tabs: 1-12
- Background color: black, gray, white
- Add a header to this section: checkbox
Tabs can be opened via anchor link. Add HTML anchor to individual tab blocks, not content within the tab.
Note: Follow copy instructions from blocks chosen to be housed within the tabs container.
Note: Follow photo/video instructions from blocks chosen to be housed within the tabs container.
- Unlimited tabs
- Unlimited tab images
- Tab content is a WYSIWYG so user has options of adding any type of media
Live Block
Example 1 of 1
header
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur. Cursus ac justo a aliquet montes. Amet vel libero luctus dignissim interdum a mi mi. Aliquet ipsum non aenean imperdiet pulvinar ut. Ac nam lacus condimentum elementum urna eget pulvinar a. Sit elementum in posuere erat ullamcorper cursus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur. Cursus ac justo a aliquet montes. Amet vel libero luctus dignissim interdum a mi mi. Aliquet ipsum non aenean imperdiet pulvinar ut. Ac nam lacus condimentum elementum urna eget pulvinar a. Sit elementum in posuere erat ullamcorper cursus.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur. Cursus ac justo a aliquet montes. Amet vel libero luctus dignissim interdum a mi mi. Aliquet ipsum non aenean imperdiet pulvinar ut. Ac nam lacus condimentum elementum urna eget pulvinar a. Sit elementum in posuere erat ullamcorper cursus.
Lorem ipsum dolor sit amet consectetur. Cursus ac justo a aliquet montes. Amet vel libero luctus dignissim interdum a mi mi. Aliquet ipsum non aenean imperdiet pulvinar ut.
Lorem ipsum dolor sit amet consectetur. Cursus ac justo a aliquet montes. Amet vel libero luctus dignissim interdum a mi mi. Aliquet ipsum non aenean imperdiet pulvinar ut. Ac nam lacus condimentum elementum urna eget pulvinar a. Sit elementum in posuere erat ullamcorper cursus. Ac nam lacus condimentum elementum urna eget pulvinar a.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur. Cursus ac justo a aliquet montes. Amet vel libero luctus dignissim interdum a mi mi. Aliquet ipsum non aenean imperdiet pulvinar ut. Ac nam lacus condimentum elementum urna eget pulvinar a. Sit elementum in posuere erat ullamcorper cursus.
Lorem ipsum dolor sit amet consectetur. Cursus ac justo a aliquet montes. Amet vel libero luctus dignissim interdum a mi mi. Aliquet ipsum non aenean imperdiet pulvinar ut.