---
title: "Portal Components"
slug: "portal-components"
updated: 2025-08-13T16:00:24Z
published: 2025-08-13T16:00:24Z
---

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

# Portal Components

Portal **components**let you create content templates for portals and express portals:

- 🖌️ Components let the users creating a portal **choose styling options**from a list you provide.
- 🔒 Components can be **locked** to prevent editing by other users.
- 👀 Components can be **previewed** to ensure that the element renders as desired.
- ♻️ Components can be **reused** to prevent wasted time on duplicate work.

For example, you might create a header component that offers users a selection of one of two brand-standard colors. This gives users some control over how the portal looks, without handing over the branding reins completely.

## How components work

1. Set up a component with HTML and **variables.** Variables are Liquid Markup elements that offer a list of styling options. For example, you can create a background color variable with color options from among your brand standard.
2. The Slate users that build portals can arrange the components and select from among the variable options you provide. Your portals are configurable, but still adhere to a unified look and feel.

Here’s an example: the Slate user assembling the portal has a choice of font and background color, but cannot otherwise edit the component.

[![Component variable options example.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17198774188443.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17198774188443.png)

> [!WARNING]
> 📝 Portal components are similar to, but not interchangeable with, [Deliver components](/v1/docs/deliver-designer).

## Variables

Components are shells that include HTML and configurable elements called **variables.**Variables are controlled by [Liquid markup](/v1/docs/getting-started-with-liquid-markup).

There are four variable types:

- **Text (String)**: A free text element
- **Number (integer)**: A whole number
- **True/False (Boolean)**: A yes/no value stored as a "1" or "0"
- **Select (List)**: A single-value list of prompts

## Using components in a portal

To use components in a portal:

1. From the main navigation, select **Database.**
2. Select **Portals.**
3. Select an existing portal, or select **New Portal**to [create a new one](/v1/docs/creating-a-custom-portal).
4. Create a new view, or select an existing one.
5. From the palette at right, select **Component**. A Configure Component pop-up appears. [![Selecting a portal component.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17195491308699.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17195491308699.png)
6. Adjust the component's configurable variables, if any.
7. Select **Save.**

## Example: Creating a configurable header

The steps for creating new portal components are best explained in context. In this example, we'll create a sample header with three styling options that the user can configure:

- Background color
- Font
- Text alignment

### Step 1: Create a new component

1. From the main navigation, select **Database.**
2. Select **Portals.**
3. On the right side of the page, select **Components**.
4. Select **New Component**. A pop-up appears.

[![Navigating to the Components page.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17197040950043.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17197040950043.png)

1. Enter the following configurations:
  - **Name:**Enter a unique, descriptive name.
  - **Description:**Enter a description if desired.
  - **Status:**Active
  - **Folder:**Keep components organized in a clear folder structure. Select **Other**to create a new folder.
2. Select **Save.**The component editor window appears.
3. Follow along with the following example by selecting **Edit Component.**

[![Component_Configurations.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906333083.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906333083.png)

### Step 2: Create variables in the source editor

Select the **Source**button in the WYSIWYG editor. Paste the following line of HTML between the tags:

```xml
<div style="background:{{background}};font-family:{{fontface}};text-align:center;color:white;padding:25px;">
{{header}}
</div>
```

The HTML contains merge fields for `background`, `fontface`, and `header`. These elements will be populated by creating corresponding variables.

[![Pasting_HTML_between_Body_tags.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196918141339.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196918141339.png)

Select **OK**to close the Source window.

### Step 3: Configure the background color variable

First, let's create the variable for background color using the Liquid Markup variable `background`.

1. Select **New Variable** at right. A pop-up appears.
2. Configure the following settings:
  - **Name**: Background Color
  - **Liquid Markup Variable**: background
  - **Description**: Enter an optional description.
  - **Required**: Select the checkbox
  - **Type**: Select (List)
  - **Prompts**: Similar to overriding system prompts on a form, we will add a display name, followed by a caret ^, and then the hex code for the desired background colors:
    - `Blue^#00669e`
    - `Green^#99cc00`
  - **Default Value**: Blue.

![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image(92).png)
3. Select **Save**. The new variable *Background Color* appears in the list at right.

> [!NOTE]
> 💡 You can use [HTML color names](https://www.w3schools.com/tags/ref_colornames.asp) or RGB hex colors.

### Step 4: Configure the font variable

The second variable we will add is for the **font:**

1. Select **New Variable**from the navigation at right. A pop-up appears.
2. Configure the following settings:
  - **Name**: Font Face
  - **Liquid Markup Variable**: fontface
  - **Description**: Enter an optional description.
  - **Required**: Select the checkbox
  - **Type**: Select (List)
  - **Prompts**: In this case, we do not need to override the prompt values since the font name is the same as the desired value.
    - Arial
    - Times New Roman
  - **Default Value**: Arial

[![Configure_font_face_variable.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906347163.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906347163.png)
3. Select **Save.**The new variable *Font Face* appears in the list at right.

### Step 5: Configure the default header text variable

Finally, we will add the **default text** for the header:

1. Select **New Variable**from the navigation at right. A pop-up appears.
2. Configure the following settings:
  - **Name**: Header
  - **Liquid Markup Variable**: header
  - **Description**: Enter an optional description.
  - **Required**: Select the checkbox
  - **Type**: Text (String)
  - **Default Value**: Slate University [![Configure_header_variable.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906350363.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906350363.png)
3. Select **Save**.

### Step 6: Preview the component

With all three variables in place, we can now select**View Preview** to display the variables in action:

[![View_Preview.png](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906354715.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/17196906354715.png)

From here, create additional components as needed. With those, you and your staff will be ready to quickly build a portal in line with your institution’s brand.

Similar to Conditional Logic, Liquid Markup allows text or images to be displayed or hidden based on defined criteria. Liquid Markup offers more nuance that Conditional Logic and is generally recommended for more complex logic.

## Related

- [The For Tag and Liquid Looping](/liquid-markup-looping.md)