--- title: "UI Growth Kit B2C: componentes frontend | Laioutr" canonical_url: "https://www.laioutr.com/es/growth-kits/b2c" locale: es meta: description: "UI Growth Kit B2C de Laioutr: componentes frontend probados, rápidos y accesibles, combinables en Studio y reutilizables en cada marca." "og:description": "UI Growth Kit B2C de Laioutr: componentes frontend probados, rápidos y accesibles, combinables en Studio y reutilizables en cada marca." "og:title": "UI Growth Kit B2C: componentes frontend | Laioutr" --- ![A dark background image for the banner.](https://www.laioutr.com/img/banner/hero-dark-mobile.jpg) UI Growth Kit # UI Growth Kit: componentes probados para frontends más rápidos Para equipos de contenido y marketing que quieren iterar más rápido. [Ver los Blueprints](https://www.laioutr.com/es/blueprints) [Reservar una demo](https://www.laioutr.com/es/contact) 70+ Componentes en la biblioteca UI 1,2 s LCP mediano en el frontend en producción −65 % Time-to-launch de landing pages 50+ Backends conectables ## Qué incluye el kit Ocho grupos de componentes cubren todo el funnel: descubrimiento, producto, conversión y servicio. Cada componente está probado, es rápido y accesible. Una vez en la biblioteca UI, se puede usar en cada frontend y cada marca. Navegación y descubrimientoPágina de inicio y storytellingCategoría / listadoFicha de productoCarrito y checkoutCuenta y servicioConversión y personalizaciónConfianza, cumplimiento y rendimiento ## Todos los componentes del kit [B2C Banner Basic A full-width promotional banner with image, headline and a call-to-action button, great for announcements, campaigns or sales.BannerHeroesContent](https://www.laioutr.com/es/growth-kit/section-banner-basic) [B2C Banner Integrated A banner that blends into surrounding content with media, text and a button, ideal for in-page promotions between sections.BannerContent](https://www.laioutr.com/es/growth-kit/section-banner-integrated) [B2C Banner Showcase A bold, image-led showcase banner with heading and call-to-action. Built to highlight a single hero offer or campaign.BannerHeroesFeaturing Products](https://www.laioutr.com/es/growth-kit/section-banner-showcase) [B2C Breadcrumbs A trail of links to the current page, with the home page always prepended automatically. It can draw items from a bound breadcrumb query or from manual entries, which take precedence when both are set.NavigationHeader](https://www.laioutr.com/es/growth-kit/section-breadcrumbs) [B2C Category Card Grid A responsive grid of category cards to help shoppers jump into a product category from the homepage or landing pages.GridsNavigationProduct Listing Page](https://www.laioutr.com/es/growth-kit/section-category-card-grid) [B2C Category Card Slider A horizontal, swipeable carousel of category cards, great for showcasing many categories without taking up much vertical space.NavigationProduct Listing PageSliders](https://www.laioutr.com/es/growth-kit/section-category-card-slider) [B2C Container A flexible empty container that can hold any blocks. Use it to combine and arrange content freely.Blank ContainersContent](https://www.laioutr.com/es/growth-kit/section-container) [B2C Footer The page footer with link columns on desktop and collapsible sections on mobile, the standard place for menus, contact info and social links.FooterNavigation](https://www.laioutr.com/es/growth-kit/section-footer) [B2C Basic Header A compact site header with logo, navigation, an optional action button and a built-in locale switcher, without the cart, search and account icons of a full shop header. Well-suited to content sites and smaller catalogues.HeaderNavigation](https://www.laioutr.com/es/growth-kit/section-header-basic) [B2C Shop Header A full shop header with search, cart, wishlist and account icons plus a multi-level menu, built for stores with many categories and products.HeaderNavigationCheckout & Cart](https://www.laioutr.com/es/growth-kit/section-header-shop) [B2C Hero Slider A full-width hero carousel that rotates between multiple slides, each with its own image or video background, typically the first thing visitors see on a landing page.HeroesSlidersBanner](https://www.laioutr.com/es/growth-kit/section-hero-slider) [B2C Media & Text A side-by-side layout pairing a large image or video with text content and an optional button, great for storytelling sections.BannerContent](https://www.laioutr.com/es/growth-kit/section-media-text) [B2C Newsletter Signup A full-width signup section to collect email subscribers, looks particularly good near the footer to capture visitors before they leave.FooterCustomer RelationsContent](https://www.laioutr.com/es/growth-kit/section-newsletter-registration) [B2C Page Hero A clean text hero introducing a page with a heading and optional subline. A lightweight alternative to image heroes.HeroesContentHeader](https://www.laioutr.com/es/growth-kit/section-page-hero) [B2C Page Not Found The 404 page shown when a visitor reaches a missing URL. Includes a friendly message and a button back to safety.ContentNavigation](https://www.laioutr.com/es/growth-kit/section-page-not-found) [B2C Pop-up A modal overlay that opens automatically on page load, showing one content block, an info, newsletter or promotion pop-up, with configurable appearance and close behavior.ContentCustomer Relations](https://www.laioutr.com/es/growth-kit/section-pop-up) [B2C Product Detail The foundation of every Product Detail Page, a media gallery on one side and a product-information column (price, variants, rating, stock, add-to-cart) on the other. It renders the single product bound by the page's Product query.ProductsProduct Detail PageCheckout & Cart](https://www.laioutr.com/es/growth-kit/section-product-detail) [B2C Product Listing A product grid with heading, filters, sorting and pagination. The standard category page for browsing a catalogue.ProductsProduct Listing PageGrids](https://www.laioutr.com/es/growth-kit/section-product-listing) [B2C Product Reviews Customer reviews for a product, an overall rating summary computed from the product's linked reviews, with filters and pagination. It runs its own Product query, typically bound to the same product as the product-detail section above it.Product Detail PageCustomer RelationsTestimonials](https://www.laioutr.com/es/growth-kit/section-product-reviews) [B2C Product Slider A swipeable row of product tiles bound to a curated or queried product set. Great for "new arrivals", "bestsellers" or related products.ProductsSlidersFeaturing Products](https://www.laioutr.com/es/growth-kit/section-product-slider) [B2C Product Slider – Showcase A product slider paired with a promotional banner (heading, image or video, button) up front, combines a campaign message with a curated, query-bound product row.ProductsSlidersFeaturing ProductsBanner](https://www.laioutr.com/es/growth-kit/section-product-slider-showcase) [B2C Promotion Banner A promotion banner with an optional countdown, code-copy button, and CTA.Banner](https://www.laioutr.com/es/growth-kit/section-promotion-banner) [B2C Scroll Anchor An invisible jump target identified by an anchor name that is unique per page. Link to that name from anywhere to scroll visitors straight to this spot.NavigationBlank Containers](https://www.laioutr.com/es/growth-kit/section-scroll-anchor) [B2C Search Result Hero A hero strip at the top of the search results page showing the searched term and number of hits. The count comes from the same Product query that feeds the results grid, and the search term is read from the ?q= URL parameter.NavigationHeroesProduct Listing Page](https://www.laioutr.com/es/growth-kit/section-search-result-hero) [B2C Top Bar A slim bar above the header for service links, language switcher and an optional light/dark mode toggle.HeaderNavigation](https://www.laioutr.com/es/growth-kit/section-top-bar) [B2C USP Banner A thin banner of selling points like "free shipping" or "easy returns", typically sits above or below the header to reassure shoppers.BannerHeaderCustomer Relations](https://www.laioutr.com/es/growth-kit/section-usp-banner) [B2C Accordion A collapsible list of question-and-answer items. Perfect for FAQs or expandable details that save vertical space.Content](https://www.laioutr.com/es/growth-kit/block-accordion) [B2C Banner Basic A promotional banner with a caption, headline, subline and a call-to-action over a full-bleed background image or video. Drop it into any section or content slider alongside cards and other banners.BannerContent](https://www.laioutr.com/es/growth-kit/block-banner-basic) [B2C Banner Integrated A compact banner that blends into surrounding content, combining an icon, heading, subline and up to two call-to-action buttons. Works with or without a background image inside a content slider or grid.BannerContent](https://www.laioutr.com/es/growth-kit/block-banner-integrated) [B2C Banner Showcase A bold, image-led showcase banner that foregrounds a media asset alongside a heading, a short description and a call-to-action. Highlights a single offer, product or campaign inside a slider or grid.BannerFeaturing ProductsContent](https://www.laioutr.com/es/growth-kit/block-banner-showcase) [B2C Button A clickable call-to-action button. Link visitors to any page, anchor or external URL.ContentNavigation](https://www.laioutr.com/es/growth-kit/block-button) [B2C Category Card A visual entry point for a product category, pairing an image or video with a title, an optional flag badge and a link to the category page. Used inside Category Card Grid and Slider sections.NavigationProduct Listing PageContent](https://www.laioutr.com/es/growth-kit/block-category-card) [B2C Filter Bar Filter controls for a product listing that read the available facets, sortings and totals from the same product query as the grid they accompany. Shows a live product count and active filters, with optional quick filters and inline sorting.Product Listing PageNavigationProducts](https://www.laioutr.com/es/growth-kit/block-filter-bar) [B2C Footer Menu A titled column of links for the footer. Group related pages like "Help", "Company" or "Legal".FooterNavigation](https://www.laioutr.com/es/growth-kit/block-footer-menu) [B2C Hero Slide A single slide for the Hero Slider, pairing a full-bleed background image or video with captions, a headline, subline and call-to-action buttons.HeroesBannerSliders](https://www.laioutr.com/es/growth-kit/block-hero-slider-slide) [B2C Embedded Page Embed an external web page or widget, forms, calculators, booking widgets or maps, inside your page. The embedded site must permit framing; some sites block it through their security headers.Content](https://www.laioutr.com/es/growth-kit/block-iframe) [B2C Load More A "load more" control for long lists, an alternative to pagination. Shows how many of the available products are already loaded.NavigationProduct Listing PageProducts](https://www.laioutr.com/es/growth-kit/block-load-more) [B2C Image A single image or video with an optional lightbox. Drop it into any section to add standalone visual content.Content](https://www.laioutr.com/es/growth-kit/block-media) [B2C Mega Menu A large multi-column dropdown that opens below the header, building its columns from a queried category tree, curated navigation items, manually authored items, or a mix. Used in a header's desktop slot for shops with many categories and subcategories.HeaderNavigation](https://www.laioutr.com/es/growth-kit/block-mega-menu) [B2C Basic Menu A simple horizontal navigation menu with manually authored dropdowns up to three levels deep. Used in a header's desktop slot, best for sites with a small number of top-level pages.HeaderNavigation](https://www.laioutr.com/es/growth-kit/block-menu-basic) [B2C Side-by-Side Menu A drawer-style navigation that opens from the header and shows categories and subcategories side by side, great for deep catalogues.HeaderNavigation](https://www.laioutr.com/es/growth-kit/block-menu-side-by-side) [B2C Mobile Menu (Basic) A simple slide-in mobile menu paired with the Basic Header. List pages and links for small-screen visitors.HeaderNavigation](https://www.laioutr.com/es/growth-kit/block-mobile-menu-basic) [B2C Mobile Menu (Shop) A full mobile menu for shops with a category grid and drill-down navigation, designed for catalogues with many categories.HeaderNavigationProduct Listing Page](https://www.laioutr.com/es/growth-kit/block-mobile-menu-shop) [B2C Pagination Page-number controls for long lists. Lets visitors step through products, blog posts or search results.NavigationProduct Listing PageBlog](https://www.laioutr.com/es/growth-kit/block-pagination) [B2C Info Pop-up An informational pop-up: icon, heading, text and an optional call-to-action. Ideal for announcements like shipping delays or new features. Placed inside a Pop-up section.ContentCustomer Relations](https://www.laioutr.com/es/growth-kit/block-pop-up-info) [B2C Newsletter Pop-up A newsletter sign-up pop-up: icon, heading, text and an email input. Grow your subscriber list without interrupting the landing experience. Placed inside a Pop-up section.ContentCustomer Relations](https://www.laioutr.com/es/growth-kit/block-pop-up-newsletter) [B2C Promotion Pop-up A promotional pop-up: icon, heading, text, a call-to-action, and either a discount code or a countdown. Drive immediate sales during a campaign. Placed inside a Pop-up section.ContentCustomer Relations](https://www.laioutr.com/es/growth-kit/block-pop-up-promotion) [B2C Product Title & Brand Shows the product's name and brand at the top of the product page.Product Detail PageProducts](https://www.laioutr.com/es/growth-kit/block-product-detail-basic-info) [B2C Benefits Box A short bulleted list of product benefits or trust badges (e.g. free shipping, easy returns) on the product page.Product Detail PageProductsCustomer Relations](https://www.laioutr.com/es/growth-kit/block-product-detail-benefits-box) [B2C Product Description The long-form product description and details on the product page. Supports rich text formatting.Product Detail PageProductsContent](https://www.laioutr.com/es/growth-kit/block-product-detail-details) [B2C Energy Label EU energy efficiency label with class image, lightbox preview and an optional product data sheet link.Product Detail PageProducts](https://www.laioutr.com/es/growth-kit/block-product-detail-energy-label) [B2C Price The product price block, showing the price of the currently selected variant along with any discount or strikethrough price and tax info. The displayed price updates as the shopper changes their variant selection.Product Detail PageProducts](https://www.laioutr.com/es/growth-kit/block-product-detail-price-info) [B2C Rating Shows the product's average star rating and the number of reviews.Product Detail PageProducts](https://www.laioutr.com/es/growth-kit/block-product-detail-rating) [B2C Variant Options Inline variant pickers (size, color, etc.) shown as buttons or swatches on the product page. Selecting an option updates the shared variant selection, so the price, stock and gallery blocks on the same page update to match.Product Detail PageProducts](https://www.laioutr.com/es/growth-kit/block-product-detail-variant-selector-options) [B2C Product Variants (Multiple) A multi-quantity variant picker for products bought in several variants at once, sets, packs or wholesale ordering. When the variants include a color option, they are grouped by color automatically.Product Detail PageProductsCheckout & Cart](https://www.laioutr.com/es/growth-kit/block-product-detail-variants-multiple) [B2C Product Image Gallery A gallery of product images and videos with thumbnails and zoom, the main visual on the product page. Falls back to the product's cover image when no gallery images are configured.Product Detail PageProducts](https://www.laioutr.com/es/growth-kit/block-product-media-gallery) [B2C Product Grid A responsive grid of product tiles for a listing or category page, with add-to-cart directly from each tile. Bind it to a collection or query to populate products; filter, sort and pagination blocks in the same section share that bound query.ProductsProduct Listing PageGrids](https://www.laioutr.com/es/growth-kit/block-products-listing) [B2C Sort Selector A dropdown for shoppers to sort a product listing. By price, popularity, newness and more.Product Listing PageProductsNavigation](https://www.laioutr.com/es/growth-kit/block-sort-modes) [B2C USP Item A single selling point with icon and short text. Drops into the USP Banner alongside other reassurance items.BannerHeaderCustomer Relations](https://www.laioutr.com/es/growth-kit/block-usp-banner-item) [B2C Withdrawal Button A statutory right-of-withdrawal button (EU Widerrufsbutton, § 356a BGB). Opens a form with name, order/contract reference and email, and submits the withdrawal. Place it in the footer.ContentCustomer RelationsFooter](https://www.laioutr.com/es/growth-kit/block-withdrawal-button) Vista previa en vivo ## No una lista de piezas, sino páginas de ejemplo terminadas con los Frontend Blueprints Los Frontend Blueprints no muestran solo componentes sueltos, sino páginas de ejemplo completas compuestas a partir del kit. En un minuto se ve lo que puede salir en línea en días en lugar de semanas. [Ver los Blueprints](https://www.laioutr.com/es/blueprints) ![B2C Startseite](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:2048/auto_image/cmqqm1afi01kz07mp7jy4vypy) Página de inicio ![B2C Kategorie](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:2048/auto_image/cmqqm1aax024s08mdrtslhnuc) Categoría ![B2C Produktdetails](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:2048/auto_image/cmqqm1adl01kr07mpg48p050j) Ficha de producto ![Book a demo mobile](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:800/auto_image/cmolld7ym133w07les4g75kr9) Llamada estratégica ## El frontend como capa de control Una conversación sobre stack, roadmap y escenario de replatforming. El resultado: una visión clara de cómo encaja Laioutr, cuánto cuesta y en cuánto tiempo es posible salir a producción. *"Después de 30 minutos supimos que Laioutr hace viable nuestro replatforming."* *Daniel B., CEO,* [*hygibox.de*](https://hygibox.de) [Reservar una demo](https://www.laioutr.com/es/contact) ## Structured Data ```json { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://www.laioutr.com/#identity", "name": "Laioutr", "legalName": "Laioutr GmbH", "url": "https://www.laioutr.com/", "logo": { "@type": "ImageObject", "url": "https://www.laioutr.com/laioutr-logo.png", "width": 400, "height": 400 }, "email": "info@laioutr.com", "telephone": "+49 30 75435715", "address": { "@type": "PostalAddress", "streetAddress": "Münchweilersteig 5", "postalCode": "12559", "addressLocality": "Berlin", "addressCountry": "DE" }, "vatID": "DE450905846", "sameAs": [ "https://www.linkedin.com/company/laioutr", "https://www.youtube.com/@Laioutr", "https://x.com/laioutr" ] }, { "@type": "WebSite", "@id": "https://www.laioutr.com/es/#website", "url": "https://www.laioutr.com/es/", "name": "Laioutr", "inLanguage": "es", "publisher": { "@id": "https://www.laioutr.com/#identity" } }, { "@type": "CollectionPage", "@id": "https://www.laioutr.com/es/growth-kits/b2c#webpage", "url": "https://www.laioutr.com/es/growth-kits/b2c", "name": "B2C", "description": "UI Growth Kit B2C de Laioutr: componentes frontend probados, rápidos y accesibles, combinables en Studio y reutilizables en cada marca.", "inLanguage": "es", "isPartOf": { "@id": "https://www.laioutr.com/es/#website" }, "breadcrumb": { "@id": "https://www.laioutr.com/es/growth-kits/b2c#breadcrumb" }, "primaryImageOfPage": { "@type": "ImageObject", "url": "https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/cmqqm1afi01kz07mp7jy4vypy" }, "dateModified": "2026-07-21T18:08:20.949702+00:00" }, { "@type": "BreadcrumbList", "@id": "https://www.laioutr.com/es/growth-kits/b2c#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Laioutr", "item": "https://www.laioutr.com/es/" }, { "@type": "ListItem", "position": 2, "name": "B2C" } ] } ] } ```