> ## Documentation Index
> Fetch the complete documentation index at: https://docs.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Working with the Box Hubs Builder

The Box Hubs builder provides an intuitive interface for organizing your Hub content. The builder uses the same interaction model as other Box tools, making it easy to learn and use.

## Before you begin

To organize a Hub, you must have co-owner or editor permissions. For details, see [Box Hubs Permissions](https://docs.box.com/en/box-hubs/box-hubs-for-admins/box-hubs-permissions.md).

## Edit your Hub

To open a Hub in edit mode:

1. Go to the Hubs gallery.
2. Select the Hub you want to edit.
3. In the upper-right corner, select **Edit**.

The **Add Content** panel displays on the right side. The panel has two tabs:

* **Blocks** lists all available content block types you can add to your Hub.
* **Layouts** lists predefined layouts for arranging blocks in columns.

![Box Hubs builder with the Add Content panel open on the right side of a Hub page](https://mintcdn.com/product-docs/5crRvK1JJWJHGVGu/images/box-hubs/hub-builder.png?fit=max\&auto=format\&n=5crRvK1JJWJHGVGu\&q=85\&s=6c868d248f30129aceee6b1a8408e35d)

> [!TIP]
>
> To move blocks, format text, add a page, or save your Hub without the mouse, press **Alt/Option** + **Shift** + **/** to open the **Keyboard Shortcuts** panel. For the full list, see [Using keyboard shortcuts in Box Hubs](https://docs.box.com/en/box-hubs/using-box-hubs/using-keyboard-shortcuts-in-box-hubs.md).

## Logo and header alignment

You can center-align the logo in the Hub builder. When you center-align the logo, the Hub name and description are also center-aligned.

## Content blocks

Content blocks are the building blocks of your Hub. Each block type serves a different purpose:

| Block type | Description |
| - | - |
| Files and Folders | Add content from your Box account. |
| Section Header | Create an organizational section with a title (up to 100 characters). |
| Paragraph | Add text content (up to 5000 characters). |
| Image | Add an image inline, with aspect ratio, cropping, and full-screen viewing. |
| Link Cards | Add a block that displays a set of cards, each linking to a configurable destination. |
| Call Out | Highlight important information in a new call out window (up to 5000 characters). |
| Link Preview | Embed interactive content directly in your Hub. |
| Divider | Add a visual separator between content. |

### Add a block

Use either method to add a block:

**Method 1: Select to add**

1. In the **Add Content** panel, on the **Blocks** tab, select the block type.
2. The block displays at the end of the page.

**Method 2: Drag to add**

1. In the **Add Content** panel, on the **Blocks** tab, drag the block type onto the page.
2. Drop it in the desired location.

### Manage blocks

To manage a block:

1. Select the block on the canvas.
2. The context toolbar displays with available options:
   * Move up or down
   * Move to a Different Page
   * Duplicate
   * Trash
   * Add Items (for **Files and Folders** blocks)
   * Display as grid or list (for **Files and Folders** blocks)
   * Formatting toolbar (for **Paragraph** and **Call Out** blocks)

To reposition a block, select it and drag it to the new location. To place blocks side by side, see [Layouts](#layouts).

> [!NOTE]
>
> In **Files and Folders** blocks, individual files become draggable only after you select the block. This prevents accidental movement.
>
> * **List view**: Drag and drop files or folders to reorder them.
> * **Grid view**: Select a file or folder, select the ellipsis (...) at the bottom of the card, and then select the **Move Left** or **Move Right** arrow.

### Delete a block

1. Select the block.
2. On the context toolbar, select **Trash**.

### Link Cards

The **Link Cards** block displays a row of customizable cards that link to Hub pages, Box content, or external URLs. When you add the block, three empty cards display by default.

To configure a card, select it, add a link, and edit the title, description, or background image. When you add a link, the card pulls the title, description, and image from the destination if those details are available. Cards that link outside your enterprise display an external link icon and open in a new tab.

To manage cards within the block:

* Select **Add Card** to add a card.
* Select **Trash** on the card toolbar to remove a card.
* Use the arrows on the card toolbar to reorder cards.

From the block's context toolbar, select **Left Align** (default) or **Fill** (full width) to set how the cards align.

> [!NOTE]
>
> * A **Link Cards** block must contain at least one card. When you remove the last card, the entire block is deleted from the page.
> * If you save the Hub with a card that has no link added, that card doesn't display when viewers open the Hub.

> [!WARNING]
>
> Hub access does not automatically grant viewers access to the destination of a card. If a viewer does not have access, they see the standard error state on the destination page.

## Images

The **Image** block adds a graphic directly to your Hub page, so you can include visuals without relying on a link preview. Each image displays inline and keeps its aspect ratio across desktop, tablet, and mobile screens.

### Add an image

1. In the **Add Content** panel, on the **Blocks** tab, select **Image** or drag it onto the page.
2. In the Image block placeholder, choose one of these sources:
   * **Upload from computer** — select an image file, such as a JPG, PNG, or GIF, from your device.
   * **Upload from Box** — select an image already stored in Box using the content picker. You need at least Viewer access to the file.

The image uploads and displays inline within the block.

If you add an unsupported file type or a file that exceeds the maximum size, the image isn't added and an error message explains why. For an upload that fails due to a connection or server error, select **Retry**.

### Set the aspect ratio and crop

After you add an image, it displays at its original size. To frame it, select an aspect ratio from the image toolbar:

* **Original** — keeps the image's original proportions. This is the default.
* **Portrait** — 3:4
* **Square** — 1:1
* **Wide** — 16:9
* **Extra Wide** — 21:9

When you select an aspect ratio other than **Original**, the image is cropped to that ratio from the center, and the toolbar displays an **Adjust** button. To reframe the image within the ratio, select **Adjust**, drag the slider to change how the image fills the frame, and then select the checkmark to apply. The aspect ratio stays fixed as you adjust.

If you change the aspect ratio or replace the image, the crop resets to the center so you can adjust it again. To swap in a different image, select **Change Image** on the toolbar.

### Resize an image

To resize an Image block, drag its top or bottom edge up or down. As you drag, the block moves through the preset aspect ratios — Portrait, Square, Wide, and Extra Wide — and snaps to the nearest one when you release. This is an alternative to selecting a ratio from the toolbar.

### View an image full screen

When viewing a Hub, select an image to open it in full-screen mode.

## Sections

Sections help you organize related content by creating visual separators on your page. Each section title marks the beginning of a new section.

### Create a section

1. In the **Add Content** panel, on the **Blocks** tab, select **Section Title** or drag it onto the page.
2. Enter a section title (up to 100 characters).
3. Add content blocks to your section.

When you add a section title, an outline is created automatically in the Hub navigation. This makes browsing easier for viewers.

### Reorder sections

1. Select the section title.
2. In the context toolbar, select **Move Up** or **Move Down**.
3. Move the section to the desired position.

### Rename a section

1. Select the section title.
2. Enter the new title.

### Delete a section

1. Select the section.
2. In the context toolbar, select **Trash**.

## Layouts

Use layouts to display blocks in two or three columns. A page can include any number of layouts between full-width blocks.

Existing Hubs don't change until an editor adds a layout.

### Add a layout

Use either method to add a layout:

**Method 1: Choose a predefined layout**

1. In the **Add Content** panel, select the **Layouts** tab.
2. Select a layout. The layout displays on the page with empty placeholder blocks.
3. Add content to the placeholder blocks. You can leave a placeholder empty.

**Method 2: Drag a block beside another block**

1. Select the block you want to move.
2. Drag it to the left or right edge of another block.
3. Drop the block to create a new column beside the other block.

When you add a second column, the columns split 50/50 by default.

> [!NOTE]
>
> A layout can have up to three columns. You can drop another block beside a block only when the layout has fewer than three columns.

### Resize columns

To change how wide each column is, drag the divider between the columns. The columns snap to these widths:

| Layout | Available widths |
| - | - |
| Two columns | 33/66, 50/50, 66/33 |
| Three columns | Equal thirds (33/33/33) |

### Rearrange blocks in a layout

Drag blocks to:

* Reorder them within a column.
* Move them to another column in the same layout.
* Move them to a different layout.
* Move them out of a layout so they display at full width.

Blocks in a layout are top-aligned. Each column grows in height to fit its own content.

### Block behavior in columns

You can place any block type in a column. The views available for a **Files and Folders** block depend on the width of its column:

| Column | Available views |
| - | - |
| Either column of a 50/50 two-column layout | Large Grid, Large List, List |
| Wider column of a 33/66 or 66/33 two-column layout | Grid, Large List, List |
| Narrower column of a 33/66 or 66/33 two-column layout, or any column of a three-column layout | Grid, List |

If a **Files and Folders** block ends up in a column where its current view isn't available, the block switches to List view. The block stays in List view if you later remove the column.

### Empty placeholders

In edit mode, empty placeholders display so you can add content to them. Viewers don't see empty placeholders:

* If a column contains only empty placeholders, the blocks in the other columns align to the left.
* If an empty placeholder sits above a block with content, the block moves up when you save the Hub.

### Layouts on smaller screens

In narrow browser windows, columns stack into a single column in reading order. In the Box mobile app, layouts display as a single column.

## Pages

Pages provide another level of organization in your Hub. You can create multiple pages and nest them to build a clear hierarchy.

### Display pages horizontally or vertically

As an editor, you can display your Hub's pages vertically or horizontally. Choose the option that fits your Hub:

| Display option | Pages display as | Best for |
| - | - | - |
| Vertical (default) | An outline along the side | Internal Hubs |
| Horizontal | A tab bar across the top | External-facing or content-heavy Hubs with several top-level pages |

Switching between display options changes only how viewers navigate. Your page content and hierarchy stay the same.

To switch, open your Hub in edit mode and select the display icon next to the page list. Its tooltip displays the option it switches to:

* **Display pages horizontally** (![Display pages horizontally icon](https://docs.box.com/images/box-hubs/display-pages-horizontally-icon.png)) — moves the pages into a tab bar across the top.
* **Display pages vertically** (![Display pages vertically icon](https://docs.box.com/images/box-hubs/display-pages-vertically-icon.png)) — returns the pages to the outline along the side.

When pages display vertically:

* Nested pages display indented under their parent page.
* To reorder pages, drag a page up or down.
* To open a page, select it in the outline.

When pages display horizontally:

* Nested pages display under their parent tab.
* To reorder pages, drag a tab left or right.
* To open a page, select its tab.

### Add a page

1. In the Hub outline panel (when pages display vertically) or tab bar (when pages display horizontally), select **Add Page** (+).
2. Replace the default title with your page name.

The default title format is "Untitled Page \[yyyy-mm-dd hh:mm:ss]."

### Add a nested page

Nested pages (subpages) display under a parent page in the hierarchy.

1. In the Hub outline panel (when pages display vertically) or tab bar (when pages display horizontally), hover over the parent page.
2. Select the ellipsis (...) to open the page options.
3. Select **Add Nested Page**.
4. Enter a title for the nested page.

### Duplicate a page

1. In the Hub outline panel (when pages display vertically) or tab bar (when pages display horizontally), hover over the page.
2. Select the ellipsis (...) to open the page options.
3. Select **Duplicate Page**.

### Change page hierarchy

You can reorganize your pages at any time:

* **Reorder pages**: In the Hub outline, drag a page up or down. In the tab bar, drag a tab left or right.
* **Create nested pages**: Drag a page onto another page to make it a subpage.
* **Promote nested pages**: Drag a subpage into the main page area to make it a top-level page.

> [!NOTE]
>
> Your home page is always the highest page in the hierarchy and can't be moved.

### Delete a page

1. In the Hub outline panel (when pages display vertically) or tab bar (when pages display horizontally), hover over the page.
2. Select the ellipsis (...) to open the page options.
3. Select **Delete Page**.
4. In the confirmation dialog, select **Delete**.

> [!WARNING]
>
> When you delete a page, all content within it is deleted, including blocks and nested pages. This action can't be reversed.

## Notify collaborators of changes

After you make changes to your Hub, you can notify all collaborators through email.

### Send a change notification

1. Make your changes to the Hub.
2. In the upper-right corner, select **Save** > **Save & Notify Collaborators**.
3. In the notification dialog, enter a message describing your changes.
4. Select **Save & Notify**.

All Hub collaborators receive an email notification with your custom message and a link to open the Hub. As the sender, you do not receive this email notification.

### Save without notifying

If you don't want to notify collaborators:

1. Make your changes to the Hub.
2. In the upper-right corner, select **Save**.

Your changes are saved, but collaborators don't receive an email notification.