2 column tabs

Component 2 columns tabs

2 Columns Tabs is a content block in two columns:

Left: a list of tabs (options/topics).
Right: the content of the selected tab.

The idea is to allow the user to switch topics without leaving the site , always maintaining context and avoiding excessive scrolling.

How to use (in practice)

1) Create the tabs (left column)
Each tab must have:

Short title (1–4 words)
(Optional) small icon or label (e.g., “New”, “Pro”, “3 steps”)

Tip: think of the column on the left as an "index".

2) Fill in the content of the tab (right column)
Each tab opens a panel with:

Title (can repeat/expand the tab name)
Text (1–3 paragraphs)
(Optional) bullet list , image, example, CTA

Tip: each panel should "stand on its own" — that is, make sense even if the person only reads that tab.

Good content practices

Consistent names: Use the same tone and format across all tabs (e.g., all with verbs, or all with nouns).
Size balance: try to ensure that the panels have similar lengths so that the block doesn't "jump" too much when switching tabs.
One topic per tab: if you're putting two big ideas on the same board, you probably need another one.
Bullet points help: 3-5 bullet points work very well for quick reading.
CTAs per tab (if it makes sense): “View examples”, “Explore”, “Learn more” — but avoid having completely different CTAs for no reason.

When does it make the most sense to use this component?

For features/benefits (each tab = one benefit)
For steps in a process (each tab = a phase)
To compare options (each tab = one option/plan)
For collections/themes (each tab = a visual theme)

Examples of configuration and use of this component.

Option 1: 2 simple column tabs

Manifest

Less gray. More personality.

Pop art reminds us that design is also culture. Here, each color has an intention and each block has a focus.

We don't design to look "pretty" on a static screen. We design to move: to move the gaze, to move the rhythm, to move the decision. Pop aesthetics always knew this before anyone else—color doesn't ask permission, the message doesn't whisper, and the idea enters like a poster pasted on the city: direct, vibrant, unforgettable.

But there is a difference between noise and impact. Noise tires you. Impact remains.

Our manifesto is simple: energy with structure. The “wow” doesn’t live alone — it lives on a solid grid, a clean hierarchy, an experience that doesn’t make you think twice. Pop art taught us to exaggerate the essential and cut the rest. We took that and translated it into a product: less friction, more presence.

Option 2: 2-column tabs with a button

BAM!

The color that comes in first.

A layout that hits hard — and then organizes . It starts with impact, ends with clarity.

We believe in the first second: that moment when the eye decides whether to stay or move on. That's when color enters without asking permission— not to make noise , but to pave the way. The palette lights up, the typography takes center stage, and the composition does what a good poster has always done: it says everything quickly and lets the rest happen naturally.

But the impact doesn't exist in isolation. After the " BAM! ", comes the serious part: order . The grid aligns, the space breathes, and each element finds its place as if it had always been there. What seems spontaneous is, in fact, intentional: contrast to guide, hierarchy to reduce effort, rhythm to make navigation light. It's not creative chaos—it's energy with discipline.

Because the goal isn't just to grab attention. It's to transform attention into action . A captivating title, a CTA that appears at the right moment, a detail that confirms you've hit the mark. Here, pop aesthetics aren't decoration: they're a tool. Color marks priorities. The blocks tell a story. The components repeat consistently so that the experience is quick, familiar, almost automatic.

Ultimately, we want this: for the user to feel the impact… and then feel in control. For the interface to have personality, but not friction. To look bold, but function as a system. Hit — and organize . Always.

Learn more about the impact

Option 3: 2-column tabs with background

Neon mode

It shines on the screen.

Electric contrasts and a clean UI. Everything extra is in the details — not in the usability.

Neon mode is a choice: it's not "more color," it's more signal . It's using light to create direction. The brightness here isn't meant to distract—it's meant to draw attention , mark action, and bring life to what matters. Like a street sign at night: you see it from afar, you notice it quickly, and you know exactly where to go.

The base remains clean because neon only works when it has room to breathe. Behind the glow lies discipline: simple backgrounds, strong hierarchy, safe typography, and a spacing rhythm that avoids excess. The contrast is high, but readability remains easy. The visual is intense, but navigation remains obvious. It's the balance between "wow" and "click."

And then there's the detail — the perfect spot for the extra sparkle to live. An outline that lights up on hover, micro-feedback that confirms the action, a badge that seems illuminated without shouting. Small moments of energy that make the interface memorable without making it heavy. The neon isn't the entire page screaming; it's the interface winking when needed.

Ultimately, this mode is about rhythm: immediate impact, quick response, and a constant feeling of controlled movement. An experience that feels nocturnal and electric, yet remains simple, functional, and fluid. It shines on the screen—and keeps a cool head.