Riode Tab

Riode Tab is the perfect element to show a lot of information as several groups in a small area. Enjoy the Tab Element.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper bibendum ut tristique. Ac tincidunt vitae semper quis lectus. Etiam non quam la suspend risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse faucibus interdum turpis massa tinci posuere lorem ipsum. Sed velit dignissim sodales ut anunc non Ultrices eros in cursus turpis massa tincidunt.

pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectus. Vestibulum mattis ullamcorper velit sed arcu cursus vitae congue mauris. Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper bibendum ut tristique. Ac tincidunt vitae semper quis lectus. Etiam non quam la suspend risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse faucibus interdum turpis massa tinci posuere lorem ipsum. Sed velit dignissim sodales ut anunc non Ultrices eros in cursus turpis massa tincidunt.

pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectus. Vestibulum mattis ullamcorper velit sed arcu cursus vitae congue mauris. Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper bibendum ut tristique. Ac tincidunt vitae semper quis lectus. Etiam non quam la suspend risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse faucibus interdum turpis massa tinci posuere lorem ipsum. Sed velit dignissim sodales ut anunc non Ultrices eros in cursus turpis massa tincidunt.

pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectus. Vestibulum mattis ullamcorper velit sed arcu cursus vitae congue mauris. Sagittis id consectetur purus ut.

More Design Presets

We provide 2 more designed tab presets except default type to give you chance to choose your favourite from prebuilt types.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Full Nav Tab

Full Nav Tab is a tab type which its headers have 100% full width. Use Riode tab element with great possibilities.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper bibendum ut tristique. Ac tincidunt vitae semper quis lectus. Etiam non quam la suspend risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse faucibus interdum turpis massa tinci posuere lorem ipsum. Sed velit dignissim sodales ut anunc non Ultrices eros in cursus turpis massa tincidunt.

pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectus. Vestibulum mattis ullamcorper velit sed arcu cursus vitae congue mauris. Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper bibendum ut tristique. Ac tincidunt vitae semper quis lectus. Etiam non quam la suspend risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse faucibus interdum turpis massa tinci posuere lorem ipsum. Sed velit dignissim sodales ut anunc non Ultrices eros in cursus turpis massa tincidunt.

pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectus. Vestibulum mattis ullamcorper velit sed arcu cursus vitae congue mauris. Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper bibendum ut tristique. Ac tincidunt vitae semper quis lectus. Etiam non quam la suspend risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse faucibus interdum turpis massa tinci posuere lorem ipsum. Sed velit dignissim sodales ut anunc non Ultrices eros in cursus turpis massa tincidunt.

pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectus. Vestibulum mattis ullamcorper velit sed arcu cursus vitae congue mauris. Sagittis id consectetur purus ut.

Horizontal or Vertical

Riode provides an tab layout option which you can use to show tab header vertically or horizontally for your demand.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semp risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper Sagittis id consectetur purus ut.

Content Focused Element

Riode tab is an outstanding item for content focused elements. Any elements like text, image, button can be inserted into tab content.

Customize Settings

Riode tab element has huge extensibility with rich style options. Nothing is impossible to implement your own design with our element.

Combine Settings
To make a better one

Design your own tab type with imagination and make it with our tab element.

Element Image
Element Image
Element Image

Nav With Icons

Icons are good choice to make people understand more correctly and definitely. Furthermore, they even make your site beautiful and fascinating.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper biben risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectu Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper biben risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectu Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper biben risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectu Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper biben risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectu Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper biben risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectu Sagittis id consectetur purus ut.

Lorem ipsum porttitor rhoncus dolor purus. Luctus venenatis lectus semper biben risti. Diam maecenas ultricies mi eget mauris. Nibh tellus molestie nunc non isse ut anunc non Ultrices eros in cursus turpis massa tincidunt. pharetra magna ac placerat vesti bulum lea volu tincidunt vitae semper quis lectu Sagittis id consectetur purus ut.

Element Options Glossary

Here comes list of all options from our element with explanation in detail. This could probably
help you to find out what each option is for.

  • Tab Type – Choose from 6 tab types. Choose from Default, Stacked, Border, Simple, Outline, Inverse.
  • Tab Layout – Determine whether to arrange tab navs horizontally or vertically.
  • Justify Tabs – Set to make tab navs have 100% full width.
  • Active Border Width – Controls underline width of active nav in Default type tab.
  • Active Border Height – Controls underline height of active nav in Default type tab.
  • Vertical Nav Width – Controls nav width of vertical tab.
  • Nav Position – Controls alignment of tab navs. Choose from Start, Middle, End.
  • Nav Padding – Controls padding of tab navs.
  • Nav Spacing – Controls space between tab navs.
  • Nav Typography – Choose font family, weight, size, text transform, line height and letter spacing of tab navs.
  • Nav Colors – Choose text color, background color and border color of tab navs on normal and active status.
  • Content Padding – Controls global padding of tab content.
  • Content Background – Choose background color of tab content.
  • Content Border Color – Choose border color of tab content.
  • Tab Title – Input heading title for each tab item.
  • Tab Icon – Choose icon for title of each tab item.
  • Tab Icon Position – Choose icon position of each tab nav. Choose from Left, Up, Right, Bottom.
  • Tab Icon Spacing – Controls spacing between icon and label in tab item header.
  • Tab Icon Size – Controls icon size of tab item header.