# Understand and style standard components

[BetaThis feature is new and we're actively working on it.](/beta-experimental-features/#beta-features)

Standard components come with a predefined set of properties you can modify to customize and brand your Design Studio messages.

We also offer some standard components behind the scenes to help you [structure your email](#structure-your-code-with-standard-components), [enhance accessibility](#add-context-for-accessibility), [style imported emails](#style-html-like-standard-components), and [import Google fonts](#import-google-fonts).

## How styling works[](#how-styling-works)

Standard components pull from your global styles so you can create a consistent brand across your messages, but you can individually overwrite these styles too.

To style a standard component, click the component on the canvas of the visual editor to open the **Properties panel**. Component properties are generally broken down into three categories: general, layout, and styles.

*   **General** includes overarching properties like links.
*   **Layout** includes spacing, sizing (margin and padding), and alignment properties.
*   **Styles** includes text styles, colors, borders, and more.

You can choose whether to hide each standard component on desktop or mobile devices. For columns, you decide whether to show or hide the entire column block, not each column within the block.

 [Dividers](#divider) do not pull from global styles automatically. But you can update your dividers to use global colors and radii when editing a message.

### Dark mode and responsive styles[](#dark-mode-and-responsive-styles)

You can specify responsive or dark mode styles for content and containers.

*   Properties with mean you can add desktop and mobile styles. The breakpoint is 600px.
*   Properties with support dark mode styles.

Learn more in our [Responsive styles](/journeys/responsive-styles/#add-responsive-styles-to-standard-components) and [Dark Mode](/journeys/dark-mode/#add-dark-mode-styles-to-standard-components) articles.

## Add and style content[](#style-content)

Style text, links, and images to look exactly how you want.

### Button[](#button)

A button is a CTA (call to action) which is a key component for driving users to click through to the main landing page of your message. It’s a link styled to look like a button.

 To preview the link from the visual editor, you must include the protocol, like `https://`, in the link.

Under *Styles* in the Properties panel, you can customize the button in a number of ways, including the following:

*   Add a *Hover Effect*—what a message recipient sees when they mouse over the button.
*   Hide the button on desktop or mobile devices.
*   Under *Advanced*, add custom code without navigating to the code editor.
    *   Add a *CSS Class* or *Style* attribute.
    *   Add a *Data Attribute*. If your email setup requires specific HTML attributes on buttons that our other settings don’t cover, you can add a key/value pair here.

In the code editor, a standard button is defined by the `<x-cta>` tag.

**List of CSS button properties**

Label

Type

`href`

`string`  

`width`

`string`  

`height`

`string`  

`padding`

`string`  

`margin`

`string`  

`align`

`enum`  
One of: `left`, `center`, `right`

`background`

`string`  

`opacity`

`number`  

`border-radius`

`string`  

`border-style`

`enum`  
One of: `none`, `solid`, `dashed`, `dotted`

`border-width`

`string`  

`border-color`

`string`  

`box-shadow`

`string`  

`hover-color`

`string`  

`hover-background`

`string`  

`hover-opacity`

`number`  

`hover-box-shadow`

`string`  

`hover-border-radius`

`string`  

`color`

`string`  

`font-size`

`number`  

`font-family`

`string`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`text-align`

`enum`  
One of: `left`, `center`, `right`

`line-height`

`number`  

`text-transform`

`string`  
One of: `none`, `capitalize`, `uppercase`, `lowercase`

`text-decoration`

`string`  
One of: `none`, `underline`, `line-through`

`class`

`string`  

`style`

`string`  

### Headings[](#headings)

In the visual editor, when you drag a **Heading** component onto the canvas, it defaults to *Heading 2* (the equivalent of `<h2>` in HTML). You can switch from Heading 1 to Heading 6 or convert it to a paragraph by clicking the component then selecting a style from the dropdown menu.

In the code editor, headings are defined by `<x-heading-#>`.

**List of CSS heading properties**

Label

Type

`margin`

`string`  

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`text-transform`

`string`  
One of: `none`, `capitalize`, `uppercase`, `lowercase`

`text-decoration`

`string`  
One of: `none`, `underline`, `line-through`

`lang`

`string`  

`dir`

`enum`  
One of: `ltr`, `rtl`, `auto`

`class`

`string`  

`style`

`string`  

### Image[](#image)

Use the [**Image** component](/journeys/insert-components/#add-an-image) to add media to your message. Your file should be:

*   2 MB or smaller
*   4096px or less width and height
*   a hosted image or file with the extension `.jpg`, `.png` or `.gif`

In the Properties panel under *General*, include alt text to make images accessible for screen readers. Modify their appearance under *Alt Text Style*.

With **Image Set**, you can provide multiple versions of an image and let email clients choose the best one based on your recipient’s screen size. Learn more about the [`srcset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset) and [`sizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes) properties.

Like with buttons, you can define a separate style when someone hovers over the image and hyperlink the image too.

In the code editor, this component is defined by `<x-image>`.

**List of CSS image properties**

Label

Type

`src`

`string`  

`href`

`string`  

`alt`

`string`  

`width`

`string`  

`margin`

`string`  

`align`

`enum`  
One of: `left`, `center`, `right`

`opacity`

`number`  

`border-radius`

`string`  

`border-style`

`enum`  
One of: `none`, `solid`, `dashed`, `dotted`

`border-width`

`string`  

`border-color`

`string`  

`box-shadow`

`string`  

`hover-opacity`

`number`  

`hover-box-shadow`

`string`  

`hover-border-radius`

`string`  

`background-color`

`string`  

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`letter-spacing`

`number`  

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`text-transform`

`string`  
One of: `none`, `capitalize`, `uppercase`, `lowercase`

`text-decoration`

`string`  
One of: `none`, `underline`, `line-through`

`class`

`string`  

`style`

`string`  

`srcset`

`string`  

`sizes`

`string`  

### Lists[](#lists)

You can create unordered and ordered lists from the **Lists** component.

You can modify **List Type** to change between numbered or bulleted items.

In the code editor, lists are defined by `<x-list>` and `<li>` tags.

**List of CSS lists properties**

Label

Type

`list-style`

`string`  
One of: `disc`, `circle`, `square`, `decimal`, `decimal-leading-zero`, `lower-alpha`, `upper-alpha`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-latin`, `upper-latin`, `armenian`, `georgian`, `hebrew`, `hiragana`, `hiragana-iroha`, `katakana`, `katakana-iroha`

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`text-transform`

`string`  
One of: `none`, `capitalize`, `uppercase`, `lowercase`

`text-decoration`

`string`  
One of: `none`, `underline`, `line-through`

`class`

`string`  

`style`

`string`  

### Navigation[](#navigation)

Add a menu of buttons that link to your website using the Navigation component.

By default, it includes three buttons for Home, About, and Contact. Click each button to open the properties panel and add your company’s links.

To adjust the number of buttons, click any button, then choose Duplicate or Delete from the pop-up menu.

In the layers panel, all buttons are nested under *Navigation*. Click either **Navigation** or an individual **Button** to open the Properties menu.

*   Within the outer Navigation properties, adjust the horizontal or vertical spacing between the buttons using the Gap setting.
*   Within a button component, you have access to the same settings as a standard [Button](#button).

In the code editor, this component is defined by an outer `<x-wrap>` and inner [`<x-cta>`](#button) standard components.

### Paragraph[](#paragraph)

The **Paragraph** component adds a block of text to your message.

You can change a paragraph component to a heading component in the dropdown above the textbox on the visual editor canvas.

In the code editor, a paragraph is defined by the `<x-paragraph>` tag.

**List of CSS paragraph properties**

Label

Type

`margin`

`string`  

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`text-transform`

`string`  
One of: `none`, `capitalize`, `uppercase`, `lowercase`

`text-decoration`

`string`  
One of: `none`, `underline`, `line-through`

`lang`

`string`  

`dir`

`enum`  
One of: `ltr`, `rtl`, `auto`

`class`

`string`  

`style`

`string`  

### Social links[](#social-links)

Link out to your social media accounts using the **Social links** component. This is commonly used in email footers.

By default, it includes icons for Facebook, X, Instagram, and LinkedIn. Click each image to open the properties panel and add your company’s links.

To adjust the number of icons, click one then click the duplicate or delete button from the pop-up menu.

In the layers panel, all buttons are nested under *Navigation*. Click either **Navigation** or an individual **Image** to open the properties panel. Within the Navigation properties, adjust the horizontal or vertical spacing between the buttons using the Gap setting.

The default images work well in both dark and light color schemes. If you want to surface different icons based on recipients’ color scheme settings, check out how to code for dark mode.

In the code editor, this component is defined by an outer `<x-wrap>` and inner [`<x-image>`](#image) standard components.

### HTML[](#html)

Add an HTML block if you want to add custom code like form embeds or hosted videos to your email.

In the Properties panel, you add your HTML. You also have the option to [hide it on desktop or mobile](/journeys/responsive-styles/#hide-based-on-screen-size).

[Send a test](/journeys/send-test/) message to make sure your HTML compiles as expected.

### Manage links[](#manage-links)

You can add links to text as well as components with images or buttons, like the Navigation block, to encourage people to take action.

1.  Select the component in the visual editor then find *Link* in the Properties menu.
2.  Choose the right type of link from the dropdown: URL, Email, or Phone number.
    *   **URL** opens a link to a webpage. This is also how you add [**standard links**](#standard-links)—common liquid tags for unsubscribing and viewing the email in a browser.
    *   **Email** opens a recipient’s email client. You can specify a sender address, subject line, and email template.
    *   **Phone number** asks to start a call.

To preview your links, turn on the [**Preview** toggle](/journeys/preview-email-in-design-studio/#access-preview-settings) in the canvas toolbar then click your components or hyperlinked text.

#### Standard links[](#standard-links)

Standard links are just that—common links needed for accessibility and compliance: view in browser and manage subscription options.

Within a *Link* field, click **Standard links**, and then choose the relevant link type. This adds a liquid tag which you can preview in the editor or when you send a test message. Learn more about these liquid tags below:

*   [Unsubscribe](/journeys/liquid-tag-list/?version=latest#unsubscribe_url-latest)
*   [View in browser](/journeys/liquid-tag-list/?version=latest#view_in_browser_url-latest)
*   [Manage subscription preferences](/journeys/liquid-tag-list/?version=latest#manage_subscription_preferences_url-latest)

#### Disable link tracking for specific links[](#disable-link-tracking-for-specific-links)

Links in your emails inherit tracking settings in your [automations](/journeys/link-tracking/#emails)—campaigns, broadcasts, etc. By default, link tracking is on.

Turn off **Track link** if you don’t want to track clicks for a specific link:

*   For text in a standard component, like Heading and Paragraph, highlight the text, click the link icon, then turn off the toggle. Remember to click **Save**. This adds `class="untracked"` to your link.
*   For standard components, like Image, Button or Social Links, click the component on the visual editor to open the Properties panel and turn off the toggle. This adds `:track-link="false"` to your component.

If your email is connected to an automation, remember to click [Publish](/journeys/publish-changes/#publish-your-changes) to push your changes.

## Separate and space out components[](#separate-and-space-out-components)

Use dividers and spacers to create visual breaks and improve message flow.

### Divider[](#divider)

Use a **Divider** to separate content with a horizontal line.

In the Properties panel, you can adjust the color (Fill), size (Height and Width), border style, radius, and more.

In the code editor, a divider is defined by `<x-hr>`.

**List of CSS divider properties**

Label

Type

`margin`

`string`  

`background-color`

`string`  

`height`

`number`  

`width`

`string`  

`border-radius`

`string`  

`align`

`enum`  
One of: `left`, `center`, `right`

`class`

`string`  

`style`

`string`  

### Spacer[](#spacer)

We recommend you use `margin` or `padding` properties where possible to add space between content. However, if for any reason those properties don’t fulfill your needs, you can use the **Spacer** component.

The spacer component has a fixed width, dependent on the component it’s nested within. If you dragged a spacer into a section, it would span the width of the section. If you dragged a spacer into a column, it would span only the width of that column.

Adjust the size in the Properties panel to add or subtract vertical space. This does not inherit global styles.

In the code editor, a spacer is defined by `<x-spacer>`.

**List of CSS spacer properties**

Label

Type

`size`

`number`  

`class`

`string`  

`style`

`string`  

## Organize and style your message layout[](#organize-and-style-your-message-layout)

Use Sections, Boxes, and Columns to style multiple components in your message.

*   A **Box** groups related content together with a single background color.
*   **Columns** separate content horizontally, and you can set an outer background color on *Columns* then inner background colors on each *Column*.
*   A **Section** spans the full-width of the message and lets you apply both outer and inner background styles for high-level grouping and styling.

### Box[](#box)

Use the **Box** component to group and style components that should stand out from the rest of your message content, like a footer or an offer. All components inside the box component will inherit its text styles. This is a slightly simplified version of the [section](#section) component. Unlike `section`, you only set a background property.

You can set a full-width background image, gradient, or solid color to make the box stand out from other content. Find **Box Fill** in the Properties panel to get started.

Under *Advanced > Accessibility*, you can add semantic meaning to your box by adding ARIA landmarks. Screen readers use them to help people navigate your email. **You have to set both `Role` and `Label` to use them in your email; we ignore them if only one is set.**

While these landmarks are intended to improve accessibility, they can easily make accessibility worse if not used properly. Keep the following in mind when using ARIA landmarks in your emails:

*   Make sure `Label` describes the email *content* in some way so it’s differentiated from other navigation elements that people see when opening the landmarks menu of their screen reader.
*   Make sure you [set the right `Role`](https://www.goodemailcode.com/email-accessibility/aria-landmarks-in-html-email); for instance, `Article` isn’t just a news article but rather any standalone bit of content.
*   Use them to help readers navigate *main sections* of your email. Adding too many roles and labels throughout your email can bloat the landmark menu and distract people from the most important parts of your message.

In the code editor, a box is defined by `<x-box>`.

**List of CSS box properties**

Label

Type

`width`

`string`  

`height`

`string`  

`padding`

`string`  

`margin`

`string`  

`align`

`enum`  
One of: `left`, `center`, `right`

`background`

`string`  

`opacity`

`number`  

`border-radius`

`string`  

`border-style`

`enum`  
One of: `none`, `solid`, `dashed`, `dotted`

`border-width`

`string`  

`border-color`

`string`  

`box-shadow`

`string`  

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`lang`

`string`  

`dir`

`enum`  
One of: `ltr`, `rtl`, `auto`

`label`

`string`  

`role`

`enum`  
One of: `article`, `region`, `navigation`

`class`

`string`  

`style`

`string`  

### Columns[](#columns)

Use this to add columns to your layouts. Click a column to style it individually or click **Columns** under *Layers* to adjust the number of columns, gap, break point, etc.

You can set a background image, gradient, or solid color to differentiate the outer and/or inner columns from other content. In the visual editor, select the component to view the Properties panel. Click the plural **Columns** under Layers for the outermost columns component. Then set **Fill** under Styles. Click a column to set the background fill for an individual column.

We recommend you don’t use Columns to create a single column layout as that will add unnecessary code. Instead, use the [Box](#box) component.

In the code editor, columns have two component tags: an outer `x-row` component and inner `x-column` components. The `x-row` component is a required container; without it, the `x-column` components will not work. It’s important that the number of columns defined in the `:layout` property of the `x-row` component match the number of `x-column` components. For instance, in the visual editor, if the count in the *Columns* Properties panel is four, then the layout property of `x-row` must reflect four like `:layout="[25,25,25,25]`. In this case, each column is 25% of the row’s width.

**List of CSS outer columns properties**

Label

Type

`layout`

`unknown`  

`gap`

`number`  

`width`

`string`  

`padding`

`string`  

`margin`

`string`  

`align`

`enum`  
One of: `left`, `center`, `right`

`background`

`string`  

`opacity`

`number`  

`border-radius`

`string`  

`border-style`

`enum`  
One of: `none`, `solid`, `dashed`, `dotted`

`border-width`

`string`  

`border-color`

`string`  

`box-shadow`

`string`  

`break-point`

`number`  

`fallback`

`enum`  
One of: `single`, `multi`

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`class`

`string`  

`style`

`string`  

**List of CSS inner column properties**

Label

Type

`padding`

`string`  

`background`

`string`  

`vertical-align`

`enum`  
One of: `top`, `middle`, `bottom`

`opacity`

`number`  

`border-radius`

`string`  

`border-style`

`enum`  
One of: `none`, `solid`, `dashed`, `dotted`

`border-width`

`string`  

`border-color`

`string`  

`box-shadow`

`string`  

`class`

`string`  

`style`

`string`  

#### Stack columns[](#stack-columns)

By default, columns stack on narrower screens (at or below a width of 600px). You can change this by either clicking so columns display side-by-side on smaller screens or adjusting the break point at which columns stack.

To adjust the break point at which columns stack:

1.  Click **Columns** under *Layers*.
2.  In the Properties panel, click **Edit** next to *Stack Columns*.
3.  Set the pixel width at which columns stack under **Break point**. By default, columns stack at or below 600 px.
4.  (Optional) Change the fallback for clients that don’t support responsive styles. By default, columns stack on narrower screens, but you can change this to **Multi column** to prevent stacking.

In the code editor, you can add a `:break-point` property as well as a `fallback` property for email clients that don’t support break points. When you set `fallback` to `multi`, the columns will stay in a column layout. When set to `single`, the columns will stack on top of each other.

#### Reverse columns on narrower screens[](#reverse-columns-on-narrower-screens)

Enable the toggle **Reverse top and bottom columns** to reverse the column order on narrower screens.

1.  Click **Columns** under *Layers*.
2.  In the Properties panel, click **Edit** next to *Stack Columns*.
3.  Enable the toggle **Reverse top and bottom columns**.
4.  Click to switch to mobile view and preview changes. For instance, the right-most column in desktop view would become the top-most column in mobile view.

**A note on accessibility:** people navigating with a screen reader, keyboard or other tabbed input on a narrower screen or preview panel likely won’t experience the reversed order. For example, let’s say the order of columns is A, B, C and you enable reverse columns for narrower screens (C, B, A). If someone is tabbing through a narrow preview panel in Gmail, the navigation would go from A to C, where A is at the bottom and C at the top. So the navigation would appear to jump to C then backwards to B then A. While we’ve implemented a fix for this, not many email clients support it at this time.

### Section[](#section)

This component adds a full-width section you can use to separate content on a page. This is commonly used as a top-level component, inside the base component, to create a central column of content in the message. You can create multiple sections and apply different backgrounds to each for better visual separation.

You can set a background image, gradient, or solid color to separate this section from other content. In the visual editor, select the component to view the Properties panel. You’ll see **Background** and **Content Fill** under Styles. Modify Background to cover the full width of the section. Modify Content Fill to set an inner color based on the width value you specify under Layout.

Components nested inside `<x-section>` will inherit the section’s text styles.

**List of CSS section properties**

Label

Type

`width`

`string`  

`padding`

`string`  

`margin`

`string`  

`border-radius`

`string`  

`align`

`enum`  
One of: `left`, `center`, `right`

`outer-background`

`string`  

`background`

`string`  

`opacity`

`number`  

`border-style`

`enum`  
One of: `none`, `solid`, `dashed`, `dotted`

`border-width`

`string`  

`border-color`

`string`  

`box-shadow`

`string`  

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `300`, `400`, `700`

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`lang`

`string`  

`dir`

`enum`  
One of: `ltr`, `rtl`, `auto`

`label`

`string`  

`role`

`enum`  
One of: `article`, `region`, `navigation`

`class`

`string`  

`style`

`string`  

## Structure your code with standard components[](#structure-your-code-with-standard-components)

The structure of the body and head of your message is defined by the standard components `<x-base>` and `<x-head>`. Any message made using the visual editor automatically has an `<x-base>` component that you can style by clicking **Messages** under *Layers*.

### Base[](#base)

The **Base** component is the equivalent of a blank page. When you build a message from scratch using the visual editor, we add an `<x-base>` tag to your code after you drag your first component onto the canvas. Switch to the code editor and you’ll see it wrapping all components in your message.

Each message should only use one base component, and it should be the first component, wrapping all content inside it. This standard component sets the `<!doctype html>`, `<html>`, `<head>` and `<body>` tags for your message.

 Style the base component in the visual editor

Though you can’t drag and drop this component from the Insert panel, you can style it in the visual editor—click **Message** under *Layers* and select the **Properties** tab.

The default text styles of your base component inherit your global paragraph styles, but you can overwrite these and modify other properties from the editor. Your message inherits all text styles set on the base component, unless you override the settings on the nested components.

To set a background color, gradient, or image, modify the background property. Make sure you set a fallback color for email clients that don’t support background images or gradients.

**List of CSS base/message properties**

Label

Type

`title`

`string`  

`preheader`

`string`  

`background`

`string`  

`color`

`string`  

`font-family`

`string`  

`font-size`

`number`  

`font-weight`

`string`  
One of: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`

`line-height`

`number`  

`text-align`

`enum`  
One of: `left`, `center`, `right`

`lang`

`string`  

`dir`

`enum`  
One of: `ltr`, `rtl`, `auto`

`class`

`string`  

`style`

`string`  

### Head[](#head)

In the code editor, add the `<x-head>` component to pass additional content into the `<head>` tag of your messages. This is most commonly used to pass in custom `<style>` blocks, but you can also add `<link>`, `<meta>`, or even HTML comments. You can add as many `<x-head>` components as you need and place them anywhere in your code.

We pass the content of the `<x-head>` component directly to the head without any processing, so style blocks won’t be combined and deduplicated like they would be in a [custom component](/journeys/component-styling/#how-to-use-multiple-style-tags).

## Add context for accessibility[](#add-context-for-accessibility)

In the code editor, you can add `<x-hidden-text>` to enhance accessibility. Any text within the component is available to screen readers and text-to-speech tools, but visually hidden in your messages. This allows you to provide additional context for things like link text, without cluttering the visual appearance of your message.

## Style HTML like standard components[](#style-html-like-standard-components)

If you made your email outside of Design Studio, it likely doesn’t use our component language. We’ve made it possible for you to edit and style many HTML tags from the visual editor, but some you’ll have to take an extra step to edit them. For `<div>`, `<span>`, and `<table>` tags, switch to the code editor and wrap the text inside those elements in the standard component:

```html
<div style="font-size: 12px;">
  <x-edit-text> This is a div that you can edit in the visual editor. </x-edit-text>
</div>
```

Then highlight the text back in the visual editor and you’ll be able to edit basic marks like bold and italics, change the text color, or hyperlink the text.

## Import Google fonts[](#import-google-fonts)

In the code editor, use `<x-font-family>` to import Google fonts if you aren’t solely using standard components to build your message. Include this in any [custom component](/journeys/components-overview/#custom-components) that would allow the user to set a font family. It will look over a font stack, then, if any of the fonts included are Google fonts, it will import them into the template.

```html
<x-font-family font-family="Roboto, sans-serif"/>
<p style="font-family:Roboto, sans-serif">text</p>
```

**List of CSS font family properties**

Label

Type

`font-family`

`string`