The tabs widget for organizing content on your website.

The Poper tabs widget is a styled tabbed-content block. You add a set of tabs, each with a title, an optional subtitle, and an icon, and each tab carries a content panel: a heading, a description, an optional call-to-action, and an image. On three of the layouts you can also add a short list of label and value stats to a panel. The presentation is driven by one of eight layout templates, and a Settings tab lets you set the primary and text colors and toggle dark mode. It is a no-code widget: you build it in the Poper builder, copy a one-line snippet, and paste it into your site. There is no markup to write and no app framework dependency.

The eight templates each give the same content a different look, so the choice is a design decision rather than a content one. Minimal Stripe is a clean tab strip with an underline indicator, the safe default for most pages. Floating Pills renders the tabs as rounded pills. Vertical Glass places the tabs in a sidebar alongside the panel, which suits documentation and longer content. Folder Stack styles the tabs like stacked file folders. Step Tracker gives the tab strip a numbered, sequential look, ideal for a process or a set of stages. Bento Grid arranges the panel in a grid-style layout. Icon Dock leans on the per-tab icons for a compact, icon-led strip. Hero Split pairs a prominent panel with the tab navigation for a hero-style section. Because switching templates reflows the same content, you can try several and keep the one that fits your page without rebuilding anything.

Tabs are not always the right answer. Choose tabs when visitors will actively switch between a handful of short, related-but-distinct panels: product detail sections, feature breakdowns, process stages. Choose an accordion when you have many items of which the visitor will open only one or two, such as an FAQ. Choose a long scroll when the content tells a single linear story that should be read in order, such as a case study or a narrative sales page. The common failure mode of tabs is using them for content that should be a long scroll: visitors see only the first tab, miss the rest, and the tab labels become decoration rather than navigation. A simple diagnostic: would a visitor realistically click any tab other than the first? If you are not sure, the content probably wants a long scroll, and the tabs widget is better spent on a page where each section is genuinely an alternative to the others.

A tabbed block works best with a small, scannable set of tabs. Two to six is the comfortable range; beyond that the tab strip gets crowded and visitors struggle to hold the options in mind. If you find yourself wanting ten tabs, that is usually a sign the content should be split across pages or moved into an accordion. The tab labels carry the navigation, so keep them short and concrete: a single noun or short phrase that tells the visitor exactly what is behind the tab. 'Specs' beats 'Technical information'. The optional subtitle can add a few words of context under the label, and the per-tab icon gives the strip a visual anchor. The clearer each label, the more likely a visitor is to explore beyond the first panel.

Most traffic is on a phone, so a tabbed block has to work in a narrow column. The Poper tabs widget is responsive and adapts to mobile widths automatically, but the content choices still matter. Keep the tab count low so the strip does not overwhelm a small screen. Keep panel headings and descriptions concise, since long copy that was comfortable on desktop becomes a wall of text on mobile. Images in the panel should be chosen so they still read at a small size. If your content genuinely needs a sidebar layout, the Vertical Glass template gives you that on larger screens; on a phone the same widget reflows to fit. Preview the widget at a narrow width before you embed, and trim anything that feels cramped.