Tabs Modules

Organize content neatly in tabbed sections that customers can click through without leaving the page.

Module One

Photo & Icon Tabs

Elevate the look of content tabs with custom iconography, photography, and animated interactions.

Criteria

  • SEO

    Content can be optimized to support on-page SEO.

  • Responsiveness

    For mobile devices, tabs become an accordion with content sliding down directly below each photo heading.

  • Cost / Complexity

    This is a complex layout that takes time to customize to a site.

  • Required Assets

    High quality photography, custom icons.

  • Required Text

    Text headings for each tab, tab content.

tabs example

Play Module

Module Two

Icon Tabs

Use easily recognizable icons to highlight and explain product features.

Criteria

  • SEO

    Content can be optimized to support on-page SEO.

  • Responsiveness

    Image and text content scales down for smaller screens. At mobile sizes, tabbed sections automatically scroll with their headings.

  • Cost / Complexity

    This is a complex layout that takes time to customize to a site.

  • Required Assets

    Icons, high quality photography or text content for each section.

  • Required Text

    Text for tab headings, optional text for each content section.

tabs example

Module Three

Full Screen Tabs

Highlight photography of products, services or locations with full tabbed sections that span the full width of the page at any size.

Criteria

  • SEO

    Content can be optimized to support on-page SEO.

  • Responsiveness

    Tabs are replaced with a static callout link to an in-depth page on small screens.

  • Cost / Complexity

    The simple treatment at mobile sizes makes this a cost-effective solution for content tabs.

  • Required Assets

    High quality photography.

  • Required Text

    Text headings for tabs.

tabs example

Play Module

Module Four

Accordion With Table

Display detailed comparative charts about products or services using tables inside a collapsible accordion.

Criteria

  • SEO

    Content can be optimized to support on-page SEO.

  • Responsiveness

    Content scales down for smaller screens and side-by-side tables are stacked.

  • Cost / Complexity

    This is a complex solution to displaying extensive, detailed information. Costs increase depending on the layout of charts within the tabbed sections.

  • Required Assets

    Any images that will be shown with chart details.

  • Required Text

    Detailed chart specifications and accordion headings.

tabs example

Module Five

Standard Accordion

The standard accordion module uses title bars in your brand colors to collapse or expand content sections.

Criteria

  • SEO

    Content can be optimized to support on-page SEO.

  • Responsiveness

    Content scales down for smaller screens.

  • Cost / Complexity

    This is a simple and cost-effective way to display content as an accordion.

  • Required Text

    Accordion section titles, content for each section

tabs example

Play Module

Module Six

Simple Accordion

Use a single accordion section to hide supplemental content for a cleaner appearance.

Criteria

  • SEO

    Content can be optimized to support on-page SEO.

  • Responsiveness

    Content scales down for smaller screens.

  • Cost / Complexity

    This is a simple and cost-effective way to display content as an accordion.

  • Required Text

    Accordion title and content.

tabs example

Request More Information

  • I am interested in