> ## Documentation Index > Fetch the complete documentation index at: https://docs.allgoodhq.com/llms.txt > Use this file to discover all available pages before exploring further. # Page components > Your approved set of page sections, such as a hero, a feature row and a footer, and how landing pages are built and checked against them. A **page component library** is your approved set of landing page sections. A hero, a feature row, a testimonial, a call-to-action band, a footer. Each one is a block of ready-made HTML. Every landing page built from the library starts from the same sections. That keeps pages on-brand, and it means a new page takes minutes, not a design round. > [!NOTE] > > Email has its own library, called Email Components. This page is about the one for landing pages. See [Component libraries](https://docs.allgoodhq.com/mk/content/component-libraries.md) for how the two compare. ## What a library holds Open a library from **Content**. At the top you see its name, a short description, and a count of its blocks. A new library starts as a **Draft**, with a **Publish** button at the top right. ![Scrolling through a page component library in Draft, from the nav bar and hero down through the feature rows and integrations grid](https://mintcdn.com/allgoodtechnologyinc/kRFN6t6lZA4SD0Ea/images/mk/content/landing-pages/page-components-scroll.gif?s=a0a3de28886592001ef330e5f07f7367) Scrolling through a page component library: each block's name, description and preview. Under **Blocks**, each block shows three things: * **Its name**, in code type, such as `nav-bar` or `hero-split`. Pages use this name to say which block a section came from. * **What it is.** For example, "top bar with the logo, up to four links and one button." * **The block itself**, shown as it will look. Each block also carries a note on when to use it, such as "one per page, first element." That note is written for the generator, which reads it when it builds a page. It isn't shown on the card, but you can read it as a comment at the top of the block's HTML. ### Change how you view the blocks Select **View** at the top right. **Format** switches every block between **Preview** and **HTML**. **Device** switches between **Mobile**, **Tablet** and **Desktop**, so you can check how the blocks look on a phone. ![The View menu open with Format set to HTML and Device set to Desktop, showing the nav-bar block's code](https://mintcdn.com/allgoodtechnologyinc/kRFN6t6lZA4SD0Ea/images/mk/content/landing-pages/page-components-view-menu.png?fit=max\&auto=format\&n=kRFN6t6lZA4SD0Ea\&q=85\&s=1033f4b67e7beb4ebbd02d22698731de) The View menu, set to HTML. Each block now shows its code. Most libraries hold about 8 to 12 blocks. That is enough to build a whole page: a logo bar, a hero, a benefits row, a testimonial, a form section, a call-to-action band, an FAQ and a footer. Larger libraries work too. The one in the screenshot holds 32. A few blocks need a little script to work, such as an FAQ that opens and closes. The script travels with the block, so you don't set it up. ## How a page uses the library A page marks each section with the block it came from. When you save the page, allGood checks that every marked section matches that block's shape. It compares **structure only**, meaning which elements there are and how they nest. It ignores your words and your styling, because those change on every page. Changing the headline in a hero is fine. Turning a hero into something that is no longer a hero is not, and the save stops with a message naming the block and what no longer matches. When one block sits inside another, such as a button inside a hero, each is checked on its own. Changing the shared button checks the button, not every section that contains one. [Component libraries](https://docs.allgoodhq.com/mk/content/component-libraries.md#how-the-check-works) explains the check in full, including strict and advisory modes. ## Components and templates A component is **one section**. A [landing page template](https://docs.allgoodhq.com/mk/content/templates.md) is **the whole page**: which sections go in what order, plus the list of words that change from page to page. You usually want both. The library is the set of sections, and the template is how they fit together. A template is expected to be built entirely from library blocks, so anything on it that isn't a block gets flagged. ## Create a library **1. Start the library** In **Content**, select **Create** and choose **Page Components**. Give it your [brand guideline](https://docs.allgoodhq.com/mk/content/brand-guidelines.md). If you have a landing page that already looks the way you want, give it that too. Starting from a page you already have is usually faster. The generator lifts the sections that repeat out of it and writes them up as blocks. **2. Review the blocks** Scroll through the blocks and check each preview against your brand: the colors, the fonts and the logo. Switch the **View** menu to **Mobile** to check the small screen. If a block is missing, or one is wrong, ask Mary to add it or fix it. **3. Publish the library** Select **Publish** at the top right. Publishing the pages built on the library locks in the library version they used. See [Publishing and versions](https://docs.allgoodhq.com/mk/content/approvals.md). When this works, the **Draft** badge is replaced by a published version, and every block still shows its preview. ## Change a block Describe the change to Mary in plain language, and she makes it as a new version. Nothing changes on a live page until you publish. You can't edit a block's code by hand. To see the code behind a block, set **Format** in the **View** menu to **HTML**. ## Good to know * **No library means no check.** A page with no library has nothing to match against. The first page you build gets the least benefit, and the second gets the most. * **A page cites the library once.** Adding a block to the library later doesn't change pages that already exist. * **A block is self-contained.** Its styling is part of the block, and it doesn't load outside style files. Fonts from a public font service are fine. If you get stuck, contact [support@allgoodhq.com](mailto:support@allgoodhq.com). ## Related articles * [Component libraries](https://docs.allgoodhq.com/mk/content/component-libraries.md) * [Templates](https://docs.allgoodhq.com/mk/content/templates.md) * [Landing pages](https://docs.allgoodhq.com/mk/content/landing-pages.md) * [Brand guidelines](https://docs.allgoodhq.com/mk/content/brand-guidelines.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.