diff --git a/content/en/docs/content-structure/content-types/lb-landing-page.md b/content/en/docs/content-structure/content-types/lb-landing-page.md
new file mode 100644
index 000000000..6053d0e89
--- /dev/null
+++ b/content/en/docs/content-structure/content-types/lb-landing-page.md
@@ -0,0 +1,21 @@
+---
+title: Landing Page (Layout Builder)
+---
+
+Landing Page content type is used to add Landing Pages to your website using Layout Builder widgets.
+
+This page is managed with Layout Builder. You may want to uncheck "Publish Content" before creating a page, use the "Layout" tab to build the content, then Publish when the page is complete. See our [User Guide](../../user-documentation/layout-builder) for help.
+
+## Fields
+
+| Label | Machine Name | Required | Description | Field Settings | Notes |
+|------------------|------------------------|----------|-----------------------------------------------------|--------------------------------|-------|
+| Title | title | yes | Title of Landing Page | | | |
+| **Metadata** | Field group |
+| Meta description | field_meta_description | no | Short text used for metatags and cards | Text (plain, long) | |
+| Meta image | field_meta_image | no | Media image reference for use in metatags and cards | Entity reference (Media image) | |
+| Meta tags | field_meta_tags | no | Provided by Metatag module | | |
+
+## URL pattern
+
+Content type is using following pattern: `[node:title]`
diff --git a/content/en/docs/howto/migrate-to-lb/_index.md b/content/en/docs/howto/migrate-to-lb/_index.md
index edfea48e9..1f8e45c4c 100644
--- a/content/en/docs/howto/migrate-to-lb/_index.md
+++ b/content/en/docs/howto/migrate-to-lb/_index.md
@@ -1,16 +1,137 @@
---
title: How to migrate content into Layout Builder
linkTitle: "migrate to Layout Builder"
-description: Making the leap to Layout Builder can seem daunting, but we have resources to help.
+description: Leaping to Layout Builder can seem daunting, but we have resources to help.
---
-Before you start your migration, we recommend getting a better understanding of your current site with a [Content Audit](../content-audit).
+Before you start your migration, we recommend you:
+
+- understand your current site with a [Content Audit](../content-audit),
+- familiarize yourself with the [new Layout Builder Components](../../user-documentation/layout-builder/),
+- watch our [comparison of Paragraphs and Layout Builder](https://youtu.be/YdYaYE0bd6w?t=794&si=xPvRoLM0O-VxABDZ), and
+- see a side-by-side demo of the [old vs. new page building experiences](https://youtu.be/jrRY3q2lP4s).
## Plan your migration
-- Familiarize yourself with [new Layout Builder Components](../../user-documentation/layout-builder/)
-- Get organized - Write new content, complete audit spreadsheet, identify components you will need
-- Identify key pages - start with your home page and important top-level pages
- - Programs, Locations (Branches, Camps, etc.), Memberships, Articles/Blogs, Events, Schedules, etc.
-- Create a plan - decide which pages you want to build first
- - Most → Least complex
\ No newline at end of file
+The migration from Paragraphs to Layout Builder is not a small one, but it can be done in bite-sized pieces and spread out over some time if necessary. We recommend working with a [partner agency](https://ds.ymca.org/partners) to assist you through the process.
+
+> **TIP**: As you work through the migration, the new pieces of your site _will_ look different than others. Help members through the process with some messaging in an [Alert](../../user-documentation/content-types/alert) or [news post](../../user-documentation/content-types/lb-article) letting them know that things will be changing.
+
+## Decide where to start
+
+If you're doing your migration throughout your regular business, without starting from scratch (sometimes called a "lazy migration"), it helps to identify a strategy for planning the migration. These are a few possible strategies:
+
+### A campaign or goal
+
+If you have an upcoming marketing campaign you could build one or a few brand new Landing Pages with Layout Builder to try out the process. This way you're easing both your editors and members into the new designs without getting too deep.
+
+If you have a natural pause in events (maybe over a holiday) or a big series coming up you could use that as the break point for new events. Old events don't necessarily have to be converted to the new design as they're not often viewed after their date has passed.
+
+### A section of the site
+
+Maybe you want to ease into the process with some lesser-used pages, maybe you want to change the home page and top-level menu items to show off the new designs right from the outset. Either way, you can decide on a section and carve off a few pages at a time.
+
+### A content type
+
+Events or News articles are a good option to try out the new designs, although you'll need to ensure any Landing Pages that display lists of that content are also updated. Branch pages can be converted one by one without changing their listing on the Locations page.
+
+## Prepare your content
+
+Once you know what you're going to move, you'll want to get the content ready to migrate. Most text will need to be copied and pasted to the new pages (this is a great opportunity for review), but images and documents will be able to be re-used from the [Media Library](../../user-documentation/media).
+
+It could be helpful to print or screenshot pages (Firefox can capture a [full-page screenshot](https://support.mozilla.org/en-US/kb/take-screenshots-firefox)) and then annotate them to decide how each section of the page will map to its Layout Builder component. You could even use the [Wayback Machine](https://web.archive.org/) to save a snapshot of the page.
+
+### Component mapping
+
+While the exact mappings are up to each site's content editors, here are some possible mappings from Paragraphs to Layout Builder
+
+> Paragraph
+> : the Layout Builder component it maps to.
+
+1 Column
+2 Columns
+3 Columns
+4 Columns
+Secondary Description and Sidebar
+: These paragraphs can be replicated using 1-4 column [Layouts](../../user-documentation/layout-builder/#layouts)
+
+Activity Finder
+: [Activity Finder](../../user-documentation/layout-builder/activity-finder)
+
+All Amenities
+: [Branch Amenities](../../user-documentation/content-types/branch/#layout-builder-blocks)
+
+Banner
+Small Banner
+: [Banner](../../user-documentation/layout-builder/banner)
+
+Blog Posts Listing
+Featured Blog Posts
+Featured News Posts
+Latest Blog Posts
+Latest News Posts
+News Posts Listing
+: [Articles Filter, Articles Listing, Featured Articles](../../user-documentation/layout-builder/article-views)
+
+Camp Menu
+: [Camp Menu](../../user-documentation/content-types/camp/#camp-menus)
+
+Categories Listing
+: TBD
+
+Code
+: [Code](../../user-documentation/layout-builder/code)
+
+Date Block
+: None
+
+Embedded GroupEx Pro Schedule
+: Due to changes in the GroupEx Pro embed functionality, we recommend moving to a [Code](../../user-documentation/layout-builder/code) block.
+
+FAQ
+: [Accordion](../../user-documentation/layout-builder/accordion)
+
+Featured Content
+Story Card
+: [Cards](../../user-documentation/layout-builder/cards) or [Grid CTA](../../user-documentation/layout-builder/grid-cta)
+
+Gallery
+: [Carousel](../../user-documentation/layout-builder/carousel)
+
+Grid Content
+: [Grid CTA](../../user-documentation/layout-builder/grid-cta) or [Icon Grid](../../user-documentation/layout-builder/icon-grid)
+
+Limited Time Offer
+: Banner (small variant) or Alert
+
+Membership Calculator Paragraph
+: [Membership Calculator](../../user-documentation/membership)
+
+Promo Card
+: [Promo Card](../../user-documentation/layout-builder/promo-card)
+
+Simple Content
+: [Table](../../user-documentation/layout-builder/table)
+
+Social Share Icons
+: [Deprecated](../../user-documentation/paragraphs/social-share-icons)
+
+Teaser
+: [Ping-pong](../../user-documentation/layout-builder/ping-pong)
+
+Webform
+: [Webform](../../user-documentation/layout-builder/webform)
+
+## Build it
+
+Once you have a plan, go build it! Use the [Layout Builder](../../user-documentation/layout-builder) documentation to help you through the process. Building each page might look something like this:
+
+- Create a new, unpublished, Landing Page (with Layout Builder)
+- Add blocks and content to the new page
+- Ensure the URL Alias of the new page matches that of the old page
+- Un-publish the old page and publish the new page.
+- Test out the new page in a new browser, an incognito window, or your phone or tablet
+
+## Get help
+
+If at any point in this process you need help, be sure to reach out to [our community](../../../community). The functionality is always being improved, and we have a wide variety of developers and builders from other Ys who are happy to help.
diff --git a/content/en/docs/howto/use-structured-data/_index.md b/content/en/docs/howto/use-structured-data/_index.md
new file mode 100644
index 000000000..b1a7d6469
--- /dev/null
+++ b/content/en/docs/howto/use-structured-data/_index.md
@@ -0,0 +1,52 @@
+---
+title: How to leverage structured data
+linkTitle: use structured data
+description: Structured data helps the machines reading your site - search engines, AI models, and more - understand your content.
+---
+
+> Adding structured data can enable search results that are more engaging to users and might encourage them to interact more with your website
+>
+> -- [Why add structured data to a page (Google)](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data#why)
+
+The distribution (as of [version 10.3.0]({{% relref "release-ds-10.3.0.md" %}})) leverages the community contributed [Schema.org metatag module](https://www.drupal.org/project/schema_metatag) and custom code to integrate structured data into many content types. You can test if your page is outputting structured data by using the [Schema.org Validator](https://validator.schema.org/) or [Google's Rich Results Test](https://search.google.com/test/rich-results)
+
+Once your site is updated, structured data will be _automatically generated_ 🎉 with no additional work from content editors.
+
+## Articles
+
+The [Article (Layout Builder)](../../user-documentation/content-types/lb-article) content type implements the [Article Schema](https://schema.org/Article) as per [Google's Article structured data docs](https://developers.google.com/search/docs/appearance/structured-data/article).
+
+Articles have three options for the **Type**, which map to their appropriate Schema:
+
+- Blog → [BlogPosting](https://schema.org/BlogPosting)
+- News → [NewsArticle](https://schema.org/NewsArticle)
+- Press Release → [Article](https://schema.org/Article) (there is currently no other appropriate Schema)
+
+### Customizing Articles
+
+This mapping is set in code (`y_lb_article_metatags_alter` in [y_lb_article.module](https://git.drupalcode.org/project/y_lb_article/-/blob/1.1.x/y_lb_article.module)), but all other settings are configurable via the Metatag configuration (`/admin/config/search/metatag/node__article_lb`).
+
+## Branches
+
+The [Branch](../../user-documentation/content-types/branch) content type implements the [LocalBusiness Schema](https://schema.org/LocalBusiness) as per [Google's Local business structured data docs](https://developers.google.com/search/docs/appearance/structured-data/local-business).
+
+Any time the Branch Hours are updated, that content will also be reflected in the Structured Data that's read by search engines.
+
+### Customizing Branches
+
+The mapping is configurable in the Metatag configuration (`/admin/config/search/metatag/node__branch`). Hours configuration uses the [Open Y Hours_metatag tokens](https://github.com/open-y-subprojects/openy_hours_formatter#open-y-hours-metatag-tokens).
+
+## FAQs
+
+The [Accordion Layout Builder Block](../../user-documentation/layout-builder/accordion) has an option to implement the [FAQPage Schema](https://schema.org/FAQPage) as per [Google's FAQ structured data docs](https://developers.google.com/search/docs/appearance/structured-data/faqpage).
+
+If an Accordion section contains Frequently Asked Questions, check the **FAQ?** checkbox to output them as structured data.
+
+Tips for writing good FAQ content:
+
+- Ensure the content contains individual sets of questions ("How old does my child need to be to swim at the YMCA?") and answers ("The YMCA offers swim classes starting at age 3 and the pool is open to children of all ages with parental supervision").
+- Only one FAQ should be added to a page. If more than one is added, only the first will be output to the structured data.
+
+### Customizing FAQs
+
+Due to the complexity of the FAQ data, the structured data is [managed entirely in code](https://git.drupalcode.org/project/lb_accordion/-/blob/1.0.x/lb_accordion.module?ref_type=heads#L40) and is not customizable via the Drupal admin. If you need specific customizations, please post your ideas in Slack or suggest them on [the Roadmap](/roadmap) for the core team to discuss and implement.
diff --git a/content/en/docs/user-documentation/content-types/lb-landing-page/_index.md b/content/en/docs/user-documentation/content-types/lb-landing-page/_index.md
new file mode 100644
index 000000000..7f77d5810
--- /dev/null
+++ b/content/en/docs/user-documentation/content-types/lb-landing-page/_index.md
@@ -0,0 +1,31 @@
+---
+title: Landing Page (Layout Builder)
+description: A flexible content type that uses Sections and Blocks, managed with Layout Builder, to build content.
+---
+
+This page is the base for building pages with [Layout Builder](../../layout-builder).
+
+## Creating a Landing Page
+
+Go to **Admin** > **Content** > **Add Content** > **Landing Page (Layout Builder)**
+
+Fill in the content fields:
+
+- **Title** (required): The title of the page. It will not be added to the page and should be added manually with a block in the [Banner section](#customizing-a-landing-page).
+- **Metadata**: This content is used to provide context to search engines and page previews. For the best user experience create [clickable titles](https://backlinko.com/on-page-seo#optimize-title-and-description-tags), [write a compelling description](https://moz.com/learn/seo/meta-description), and [add a descriptive image](https://yoast.com/image-seo/#always).
+ - **Meta description**: A brief and concise summary of the page's content that is a maximum of 160 characters in length.
+ - **Meta image**: Choose or upload an image to be used as a thumbnail for social sharing and preview cards.
+ - **Meta tags**: Advanced meta tag configuration. This section should not be edited unless you know what you're doing.
+
+## Customizing a Landing Page
+
+Once you create a Landing Page you can customize it with [Layout Builder](../../layout-builder).
+
+Landing Pages come with these pre-configured sections:
+
+- [**Header**](../../layout-builder/header-footer/#header-section)
+- **Banner**: An edge-to-edge, no gutters section that works best with a single [Banner](../../layout-builder/banner) or [Carousel](../../layout-builder/carousel).
+- **Body**: A section with left and right margins. This can contain the bulk of your page content.
+- [**Footer**](../../layout-builder/header-footer/#footer-section)
+
+Sections can be [edited, reordered, or removed](../../layout-builder/#sections) to configure your page as you like. You can even remove the header and footer altogether if you need to create content for a digital display or other embedded system.
diff --git a/content/en/docs/user-documentation/layout-builder/_index.md b/content/en/docs/user-documentation/layout-builder/_index.md
index f4e0417a3..96a0267d8 100644
--- a/content/en/docs/user-documentation/layout-builder/_index.md
+++ b/content/en/docs/user-documentation/layout-builder/_index.md
@@ -5,8 +5,8 @@ weight: 3
Layout Builder is a powerful new page-building addition to your YMCA website.
-> Drupal's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, across types of content, or even create custom landing pages with an easy-to-use drag-and-drop interface.
->
+> Drupal's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, across types of content, or even create custom landing pages with an easy-to-use drag-and-drop interface.
+>
> \- [Layout Builder on Drupal.org](https://www.drupal.org/docs/8/core/modules/layout-builder)
## Getting Started with Layout Builder
@@ -19,15 +19,10 @@ YMCA Website Services 9.2.12 introduces a new Content Type: **Landing Page (Layo
To use Layout Builder, you'll first have to create a new page:
-- Go to **Content** > **Add Content** > **Landing Page (Layout Builder)**.
+- Choose any Layout Builder-enabled content type, or start with a basic [Landing Page](../content-types/lb-landing-page)
+- Go to **Content** > **Add Content** > **The Content Type**.
-This creation page will look different from others—there are no fields!
-
-- Set a page **Title** and configure any **Menu settings** or **URL alias** that you'd like.
-- Ensure that **Published** is unchecked.
-- Then **Save** the page.
-
-Once you've saved, you will see an empty page. Click the **Layout** tab to enter Layout Builder.
+Once you've saved, you will see an empty page. Click the **Layout** tab to enter Layout Builder or go directly there with **Save and edit layout**.
![Drupal admin tabs with an arrow pointing to "Layout"](lb_layout_tab.png)
@@ -43,9 +38,10 @@ Changes to the page are not displayed to site viewers until you **Save Layout**
When in the **Layout** editor, you will have these options at the top of the page:
-- **Save Layout**
+- **Save Layout** will save your changes and return you to the main page view.
+- **Save and edit layout** will save your changes and keep you in Layout Builder.
- **Discard Changes**
-- **Revert to Defaults** will reset your page to an empty Header and Body section.
+- **Revert to Defaults** will reset your page to the default empty layout.
After saving your changes, be sure your page is published:
@@ -55,7 +51,7 @@ After saving your changes, be sure your page is published:
## Fundamentals
-In Layout Builder, you will see the page divided up into Sections and Blocks. Your page may already be populated with a **Header** and **Body** section to get you started building, and you can change or edit those to fit your page.
+In Layout Builder, you will see the page divided up into Sections and Blocks. Your page may already be populated with some sections to get you started building, and you can change or edit those to fit your page.
### Sections
@@ -103,4 +99,4 @@ When rearranging large blocks on the page it can often be challenging to drag th
If you run into a problem, [get in touch](../../../community).
-Content on this page is adapted from [Drupal.org](https://www.drupal.org/docs/8/core/modules/layout-builder) and [Western Washington University](https://brand.wwu.edu/layout-builder)
\ No newline at end of file
+Content on this page is adapted from [Drupal.org](https://www.drupal.org/docs/8/core/modules/layout-builder) and [Western Washington University](https://brand.wwu.edu/layout-builder)
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/_index.md b/content/en/docs/user-documentation/layout-builder/advanced-options/_index.md
index 0d84dae37..24b734eb9 100644
--- a/content/en/docs/user-documentation/layout-builder/advanced-options/_index.md
+++ b/content/en/docs/user-documentation/layout-builder/advanced-options/_index.md
@@ -6,13 +6,40 @@ weight: -5
A huge amount of configuration is available with Layout Builder components using the contributed [Layout Builder Blocks](https://www.drupal.org/project/layout_builder_blocks) module, which is included with the distribution. In addition to those configuration options, we provide an extra layer of "Y Styles" that help site builders customize their sites in an accessible and brand-compliant manner.
+{{< youtube S9QninI7ydM >}}
+
## Y Styles
-These options provide customizations of Layout Builder-enabled pages at the Content Type, Page, and Component level.
+These options provide customizations of Layout Builder-enabled pages at the Content Type, Page, and Component(/Block) level.
+
+Styles inherit from content types, to pages, to components. Some styles can also be overridden at each level - block styles can override page styles, which can override content type styles.
+
+```mermaid
+flowchart
+ classDef ct fill:#5C2E9133;
+ classDef page fill:#92278F33;
+ classDef block fill:#C6168D33;
+ subgraph ct[Content Type]
+ direction LR
+ subgraph page[Page]
+ direction LR
+ subgraph block[Block]
+ blockStyles[Block Styles]
+ end
+ pageStyles[Page Styles]
+ end
+ ctStyles[Content Type Styles]
+ end
+ blockStyles -- override --> pageStyles
+ pageStyles -- override --> ctStyles
+ class ct ct
+ class page page
+ class block block
+```
### Content Type styles
-**Note:** This configuration may not be accessible to all content editors. Ask an administrator for assistance if necessary.
+> **Note:** This configuration may not be accessible to all content editors. Ask an administrator for assistance if necessary.
The default values for page-level Y Styles options are set in the Content Type display options.
@@ -27,19 +54,60 @@ To access them:
### Page styles
-Every Layout Builder-enabled page that you create will allow you to override the default settings.
+Every Layout Builder-enabled page that you create will allow you to override the default settings. All of these settings will affect all items on a page, unless they are overridden at the component level.
+
+![A screenshot displaying the "Y Styles" configuration section.](lb--advanced--y-styles.png)
-![A screenshot displayinf the "Y Styles" configuration section.](lb--advanced--y-styles.png)
-
- Edit the **Layout** on a page
- Expand the **Y Styles** section
- Choose your configuration options.
+ - **Color scheme**: ![The color scheme options](lb-advanced--color.png) The color scheme of all components on the page. Choose from four brand-compliant and accessible options:
+ - Blue/Purple
+ - Green/Blue
+ - Purple/Red
+ - Red/Orange
+ - **Border radius**: ![The border radius options](lb-advanced--border-radius.png) The curvature of container corners.
+ - 0px (square)
+ - 10px (small curve)
+ - 20px (larger curve)
+ - **Border style**: ![The border style options](lb-advanced--border-style.png) The style of container borders.
+ - No border
+ - 1px border
+ - Drop shadow
+ - **Text/Button alignment**: ![The text/button alignment options](lb-advanced--button-alignment.png) The vertical placement of elements in containers.
+ - Left
+ - Center
+ - **Button position**: ![The button position options](lb-advanced--button-position.png) Where buttons sit in containers.
+ - Inside container
+ - Overlapping container
+ - **Button fill**: ![The button fill options](lb-advanced--button-fill.png) How buttons are colored.
+ - Filled by default, outlined on hover
+ - Outlined by default, filled on hover
- Click **Save layout**
### Y Block styles
Some blocks have additional styles that can be configured per-block. For these blocks (e.g. Banner, Cards), look for the **Y Styles** section in the [block styles section](#block-styles) and set the options accordingly.
+- Banner
+ - **Variant**: ![The Banner variants](lb-advanced--banner-variants.png) Choose from five designs.
+ - Standard
+ - Overlay
+ - Chevron
+ - Frame
+ - Small - This variant hides all but the title and description and does not use an image background.
+ - **Button fill**: Override the page-level styles.
+- Card
+ - **Variant**: ![The card variants](lb-advanced--card-variants.png) Choose from four designs.
+ - Standard
+ - Overlay
+ - Chevron
+ - Color
+ - **Border style**: Override the page-level styles.
+ - **Text/Button alignment**: Override the page-level styles.
+ - **Button position**: Override the page-level styles.
+ - **Button fill**: Override the page-level styles.
+
## Section styles
When creating or editing a **Section** you have the option of configuring **Layout**, **Style**, and **Settings**.
@@ -56,7 +124,7 @@ In this section you can control the container of the Section.
- **Container type**
- **Boxed:** Section is narrower than the header of the page. Good for text-heavy layouts.
- **Full:** Section extends to the edges of the main content container.
- - **Edge to Edge:** Section extends to the edges of the page. Good for full-width components like Banners and Ping Pong blocks.
+ - **Edge to Edge:** Section extends to the edges of the page. Good for full-width components like Banners and Ping-Pong blocks.
- **Gutters**
- **With Gutters:** Section has left and right padding. Good for most non-full-width containers.
- **Without Gutters:** Section has no left and right padding. Best for Edge to Edge containers.
@@ -74,4 +142,4 @@ When creating or configuring a block you have the option of opening the **Style*
Support for these options is a work in progress and may require involvement of your development partner. Feel free to experiment with the options. Be sure to follow proper brand guidelines and accessibility practices.
-After you have completed setting the **Style** options, click back to **Content** and **Save** or **Update** to commit your changes.
\ No newline at end of file
+After you have completed setting the **Style** options, click back to **Content** and **Save** or **Update** to commit your changes.
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb--advanced--y-styles.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb--advanced--y-styles.png
index 6b43feac4..765ea5c25 100644
Binary files a/content/en/docs/user-documentation/layout-builder/advanced-options/lb--advanced--y-styles.png and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb--advanced--y-styles.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--banner-variants.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--banner-variants.png
new file mode 100644
index 000000000..26ad8add6
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--banner-variants.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--border-radius.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--border-radius.png
new file mode 100644
index 000000000..18962a17f
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--border-radius.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--border-style.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--border-style.png
new file mode 100644
index 000000000..080be955f
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--border-style.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-alignment.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-alignment.png
new file mode 100644
index 000000000..0199862dd
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-alignment.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-fill.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-fill.png
new file mode 100644
index 000000000..d18e80374
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-fill.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-position.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-position.png
new file mode 100644
index 000000000..f719350eb
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--button-position.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--card-variants.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--card-variants.png
new file mode 100644
index 000000000..f7c906e4c
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--card-variants.png differ
diff --git a/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--color.png b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--color.png
new file mode 100644
index 000000000..b9b2c17c5
Binary files /dev/null and b/content/en/docs/user-documentation/layout-builder/advanced-options/lb-advanced--color.png differ
diff --git a/content/en/ui-kit/_index.md b/content/en/ui-kit/_index.md
new file mode 100644
index 000000000..e9d80dd22
--- /dev/null
+++ b/content/en/ui-kit/_index.md
@@ -0,0 +1,5 @@
+---
+title: UI Kit
+---
+
+