Marketing Sections
v1.0.0Added in 1.6.0
A section that shows a few features in depth: alternating rows, tabs that swap the visual, tall cards or a scroll tour past a pinned visual.
Zigzag: each feature is a row with an eyebrow, a title, a short text, a three-item checklist and a Learn more link next to a visual, alternating sides on desktop and stacking copy over visual on phones. The visuals are drawn in code (a roadmap timeline, a doc editor, an automation rule) unless you pass media. Tabs: a row of tabs (or a list of cards beside the visual from 1024px) picks the feature; the visual and copy fade over. Arrow keys move between tabs, Home and End jump. On phones the tabs become a horizontally scrolling segmented row. Cards: one tall card per feature with its visual on top, three to a row from 1024px and a swipeable snap rail below. Sticky: on desktop the copy of each feature scrolls by while the visual column stays pinned and crossfades to the feature crossing the middle of the screen; on phones each feature shows its own visual under its copy. The pin needs the page (or the nearest scroll container) to scroll, so do not wrap it in an overflow container.
npx wingo-ui@latest add feature-showcasePro item: the CLI needs a Pro account. See plans