for Gutenberg
Examples
Horizontal (Default)
By default, horizontal tabs will collapse to an accordion layout if the tabs won’t fit given the width of its container. You can test that out here by resizing the example below using the vertical bar to the right of the example (hover over the example to see the drag handle).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus. Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.
Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.
In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.
Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.
Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.
Alternatively, you can set “Horizontal Tabs: Responsive Behavior” to Wrap to just let the tabs wrap:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus. Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.
Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.
In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.
Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.
Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.
Vertical
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus.
Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.
Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.
In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.
Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.
Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.
Accordion
Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.
In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.
Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.
Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.
With a new line in the header
Something in English, for a change