Tabs

Search SG - Tabs in 53

Tabs are used as a tool to navigate related content pieces within the same page, allowing your visitors to explore and discover on-page.

Background options:
  • White
  • Light
  • Dark
  • Tab 1
  • Tab 2

Tab 1

sg-defaults_hq-large.png

Lorem ipsum dolor sit amet, consecte tur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Duis aute irure dolor in reprehenderit in voluptate velit.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Tab 2

Tell me more!

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

  • Lorem ipsum dolor sit amet
  • Consecte tur adipiscing elit
  • Sed do eiusmod tempor incididunt
  • Labore et dolore magna
Feature Checklist
  • Image capabilities
  • Multiple variations
  • CTA(s) included
  • Video capabilities
  • Smart
  • Modal friendly
  • Uses HubDB
  • Requires additional help
Use Cases

The Tabs module works best when each tab's content is related, but with each tab showcasing a specific aspect of the overall topic. This allows your visitors to explore the content of your page and discover new information.

You can use this module, for example, on an event page with tabs titled "For Marketers" and "For Partners". This provides a clear path for the user to find the information most relevant to them, quickly.

Guidelines
  • Character count
    • Limit tab title to 2 to 3 short words
  • Image sizing
    • Featured desktop image: 1060x555px recommended
    • Featured tablet image: 700x367px recommended
    • Featured mobile image: 500x262px recommended
  • Variations
    • Each tab will automatically collapse into an accordion-style module on mobile devices
  • Things to know
    • Optional: featured images
    • Be sure to compress featured images before uploading (we recommend TinyPNG)