Tab Panel
The tabbed section is a text block with a minimum of two defined tabs. It may display text content, links, and media.
Example
Tabs Placed at Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Tabs Places at Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Tabs Placed at Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla.
Components
- Row Title (Optional - Should only be used if the item is the first one on the page)
- Subtitle (Optional)
Row Options
- Tab Location (Top, Left, Right)
- Add margin-top to content row
- Add margin-bottom to content row
Tab Panel (Minimum of Two Required)
- Panel Title
- Panel Content