--- title: "UI Growth Kit Publishers & Media: frontend components | Laioutr" canonical_url: "https://www.laioutr.com/en/growth-kits/publisher-media" locale: en meta: description: "Laioutr UI Growth Kit Publishers & Media: tested, high-performance and accessible frontend components, combined in Studio and reusable across every brand." "og:description": "Laioutr UI Growth Kit Publishers & Media: tested, high-performance and accessible frontend components, combined in Studio and reusable across every brand." "og:title": "UI Growth Kit Publishers & Media: frontend components | Laioutr" --- ![A dark background image for the banner.](https://www.laioutr.com/img/banner/hero-dark-mobile.jpg) UI Growth Kit # UI Growth Kit: tested components for faster frontends For content and marketing teams that want to iterate faster. [View Blueprints](https://www.laioutr.com/en/blueprints) [Book a demo](https://www.laioutr.com/en/contact) 70+ Components in the UI library 1.2 s Median LCP in the live frontend −65 % Time-to-launch for landing pages 50+ Connectable backends ## What's inside the kit Eight component groups cover the full funnel: discovery, product, conversion and service. Every component is tested, performant and accessible. Once in the UI library, it can be used in every frontend and every brand. Navigation & DiscoveryHomepage & StorytellingCategory / ListingProduct detailCart & CheckoutAccount & ServiceConversion & PersonalizationTrust, Compliance & Performance ## All components in the kit [Publishers & Media Blog Post Detail The main reading view for a single blog article, rendering the page's bound blog post as its title, cover image and body content.BlogContent](https://www.laioutr.com/en/growth-kit/section-blog-post-detail) [Publishers & Media Blog Post Listing A paginated grid of blog articles from a bound blog collection, automatically featuring the first post on top without repeating it in the grid below. The typical blog overview page.BlogGridsContent](https://www.laioutr.com/en/growth-kit/section-blog-post-listing) [Publishers & Media Content Grid A responsive grid of cards for editorial content. Pick cards manually or load them from a blog collection.BlogContentGrids](https://www.laioutr.com/en/growth-kit/section-content-grid) [Publishers & Media Content Slider A swipeable carousel mixing cards, media and banners. Fill it manually or load posts from a blog collection.BlogContentSliders](https://www.laioutr.com/en/growth-kit/section-content-slider) [Publishers & Media Editorial Grid A two-tier card layout with prominent featured cards on top and supporting cards below, perfect for magazine-style pages.GridsContentBlog](https://www.laioutr.com/en/growth-kit/section-editorial-grid) [Publishers & Media Glossary Detail The reading view for a single glossary entry, showing its term and definition.Content](https://www.laioutr.com/en/growth-kit/section-glossary-detail) [Publishers & Media Glossary Listing An alphabetically grouped A–Z index of glossary entries, drawn from a bound Glossary query or a manually authored fallback list when no query is set. When the heading is left blank, a localized default is shown.Content](https://www.laioutr.com/en/growth-kit/section-glossary-listing) [Publishers & Media Card A content card pairing an image or video with a heading, body text and an optional call-to-action or icon, the all-purpose building block for editorial grids and sliders.ContentGridsBlog](https://www.laioutr.com/en/growth-kit/block-card) [Publishers & Media Social Share Buttons A row of share buttons for Facebook, X, LinkedIn, Pinterest and email. Helps visitors spread your content.BlogContentCustomer Relations](https://www.laioutr.com/en/growth-kit/block-social-share) [Publishers & Media Text Block A flexible text block with caption, heading, subline and rich body. The workhorse for editorial copy.ContentBlog](https://www.laioutr.com/en/growth-kit/block-text) Live preview ## Not a parts list, but finished example pages with the Frontend Blueprints The Frontend Blueprints show not just individual components but complete example pages composed from the kit. In one minute it becomes clear what can go live in days instead of weeks. [View Blueprints](https://www.laioutr.com/en/blueprints) ![B2C Startseite](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:2048/auto_image/cmqqm1afi01kz07mp7jy4vypy) Homepage ![B2C Kategorie](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:2048/auto_image/cmqqm1aax024s08mdrtslhnuc) Category ![B2C Produktdetails](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:2048/auto_image/cmqqm1adl01kr07mpg48p050j) Product detail ![Book a demo mobile](https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/resize=width:800/auto_image/cmolld7ym133w07les4g75kr9) Strategy call ## The frontend as a control layer A conversation about stack, roadmap and replatforming scenario. The outcome: a clear picture of how Laioutr fits, what it costs and how fast the go-live can happen. *"After 30 minutes, we knew Laioutr makes our replatforming feasible."* *Daniel B., CEO,* [*hygibox.de*](https://hygibox.de) [Book a demo](https://www.laioutr.com/en/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/en/#website", "url": "https://www.laioutr.com/en/", "name": "Laioutr", "inLanguage": "en", "publisher": { "@id": "https://www.laioutr.com/#identity" } }, { "@type": "CollectionPage", "@id": "https://www.laioutr.com/en/growth-kits/publisher-media#webpage", "url": "https://www.laioutr.com/en/growth-kits/publisher-media", "name": "Publishers & Media", "description": "Laioutr UI Growth Kit Publishers & Media: tested, high-performance and accessible frontend components, combined in Studio and reusable across every brand.", "inLanguage": "en", "isPartOf": { "@id": "https://www.laioutr.com/en/#website" }, "breadcrumb": { "@id": "https://www.laioutr.com/en/growth-kits/publisher-media#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/en/growth-kits/publisher-media#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Laioutr", "item": "https://www.laioutr.com/en/" }, { "@type": "ListItem", "position": 2, "name": "Publishers & Media" } ] } ] } ```