Tabbed Content
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Lapus's modular elements
at the
Element Index Page →
Text Tabs
The default tab style for Lapus. Set the [data-content-align] to 'left' if you want the tabs to centered, but the tab content to be left aligned.
To set the default active tab, put the class .active on the relevant tabs parent <li> element.
<div class="tabs-container" data-content-align="left"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
代码质量
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
视觉设计
Lapus提供了简洁现代的外观，可以满足公司，科技初创公司，市场营销数字化解决方案等各种目的。 设计元素的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
用户体验
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Icon & Text Tabs
The icon tab style for Lapus achieved by placing an <i> element as the first child inside the .tab__title.
To set the default active tab, put the class .active on the relevant tabs parent <li> element.
<div class="tabs-container" data-content-align="left"> <ul class="tabs"> <li class="active"> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
代码质量
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
视觉设计
Lapus提供了简洁现代的外观，可以满足公司，科技初创公司，市场营销数字化解决方案等各种目的。 设计元素的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
用户体验
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Icon Tabs
The icon tab style for Lapus achieved by placing an <i> element as the first and only child inside the .tab__title.
To set the default active tab, put the class .active on the relevant tabs parent <li> element.
<div class="tabs-container" data-content-align="left"> <ul class="tabs"> <li class="active"> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title text-center"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
Code Quality
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
Visual Design
Lapus提供了简洁现代的外观，可以满足公司，科技初创公司，市场营销数字化解决方案等各种目的。 设计元素的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
Customer Experience
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Vertical Tabs
Add the class .tabs--vertical to the .tabs-container element to create a side-by-side tab view.
To set the default active tab, put the class .active on the relevant tabs parent <li> element.
<div class="tabs-container tabs--vertical"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
Title 1
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
Title 2
Lapus提供了简洁现代的外观，可以满足公司，科技初创公司，市场营销数字化解决方案等各种目的。 设计元素的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
Title 3
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Vertical Icon & Text Tabs
The icon tab style for Lapus achieved by placing an <i> element as the first child inside the .tab__title.
Add the class .tabs--vertical to the .tabs-container element to create a side-by-side tab view.
<div class="tabs-container tabs--vertical"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> <span class="h5">Title</span> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->
-
Title 1
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
Title 2
Lapus提供了简洁现代的外观，可以满足公司，科技初创公司，市场营销数字化解决方案等各种目的。 设计元素的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
Title 3
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Vertical Icon Tabs
The icon tab style for Lapus achieved by placing an <i> element as the first and only child inside the .tab__title.
Add the class .tabs--vertical to the .tabs-container element to create a side-by-side tab view.
<div class="tabs-container tabs--vertical tabs--icons"> <ul class="tabs"> <li class="active"> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> <li> <div class="tab__title"> <i class="icon icon--sm block icon-CLASS"></i> </div> <div class="tab__content"> Content </div> </li> </ul> </div><!--end of tabs container-->