{"product_id":"folder-tabs","title":"Folder Tabs","description":"\u003cp class=\"font-claude-response-body break-words whitespace-normal\" dir=\"auto\"\u003eA tactile, tabbed content section styled like a drawer of manila folders — real overlapping tabs with rounded corners and concave flares where each tab meets the next, so it reads as a physical stack rather than a flat set of buttons. Click a tab and its folder comes to the front. Perfect for organising a lot of information (services, product lines, FAQs, process steps) into something that feels crafted and a little nostalgic instead of a generic accordion.\u003c\/p\u003e\n\u003cp class=\"font-claude-response-body break-words whitespace-normal\" dir=\"auto\"\u003e\u003cstrong\u003eKey Features:\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul dir=\"auto\" class=\"[li_\u0026amp;]:mb-0 [li_\u0026amp;]:mt-1 [li_\u0026amp;]:gap-1 [\u0026amp;:not(:last-child)_ul]:pb-1 [\u0026amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3\"\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eUp to six folder cards, each with its own tab label, heading, text, image, button, and independent background and text colors, so you can build a graduated color stack that genuinely looks like a filing drawer\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eOptional scroll entrance effect: the section pins to the viewport and each folder flies up into the pile as the visitor scrolls, left to right, with the pile un-stacking again on scroll-up — desktop only, and automatically skipped for anyone using reduced motion\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eThe folder shape is built from real curves, not fake overlaps, so every tab junction is tangent-smooth, tabs stack with correct depth, and clicks land on the right folder even in the transparent notch above a tab\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eProperly accessible tabs with full keyboard support (arrow keys, Home, End), correct ARIA roles, and theme editor block selection that opens the matching folder automatically\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eMobile handled deliberately rather than squashed: the tab row hides and every card renders open in a clean vertical stack, since a six-tab row can never fit real labels on a phone\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eTwo-column card layout with image and content side by side, adjustable ratio, corner radius, vertical alignment, gaps, card padding, and min height — plus card stack max width so the folder never sprawls on wide screens\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eFull typographic control with per-element style, size, and max-width overrides across heading, tab labels, and card content, plus accent text styling on the section heading\u003c\/li\u003e\n\u003cli class=\"font-claude-response-body whitespace-normal break-words pl-2\"\u003eFlexible styling throughout: custom background and heading colors, an optional background image with opacity control, borders, and the sliding section effect\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp class=\"font-claude-response-body break-words whitespace-normal\" dir=\"auto\"\u003e\u003cstrong\u003ePerfect for:\u003c\/strong\u003e Service menus, product category breakdowns, process or methodology steps, FAQ groupings, tiered pricing, or any page where you'd otherwise reach for a plain accordion.\u003c\/p\u003e","brand":"Bungalow Creative","offers":[{"title":"Default Title","offer_id":47273447227561,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0602\/9538\/1161\/files\/FolderTabs.jpg?v=1784467503","url":"https:\/\/bungalowcreative.co\/products\/folder-tabs","provider":"Bungalow Creative","version":"1.0","type":"link"}