Styling

Action Links enables you to customise the look and feel of your Links with various styling options

It's important to create a consistent and familiar experience for your customers when navigating between your various digital platforms. Action Links enables you to customise the look and feel of your Links, with the option to add your own CSS style tags.

Basic styling options

For the ultimate styling customisation options, you should upgrade to the Plus or Enterprise plan. However, Action Links does provide limited styling options on the free Starter plan.

Field	Details
Body family	The default font that will be used across all of your Action Links. Where possible you should specify a series of comma-delimited, web-safe fonts in case a custom font fails to load, e.g. Inter, Helvetica, Arial, sans-serif.
Body size	The default font size for body text (in pixels). All other text (e.g. headings) will be sized relative to the value you set here. The default is 16px.
Primary colour	The primary colour used as the main colour for featured elements such as buttons. Must be in hex code format, e.g. #1e3a8a.
Primary inverse colour	The inverse of the primary colour, used for text overlaid on top of the primary colour. Make sure you choose a colour that will result in an accessible colour contrast.
Secondary colour	The colour used for the background of the main content area in your Links, and secondary elements.
Secondary inverse colour	The inverse of the secondary colour, used for text overlaid on top of the primary colour. Make sure you choose a colour that will result in an accessible colour contrast.

Custom CSS styling (Plus and Enterprise plans)

The Action Links interface markup has been designed to make it easier for customers to apply their own styling and affect the design of their Links. Customers on the Enterprise plan are able to add their own custom style tags.

Adding custom fonts

Action Links supports the majority of methods for adding custom fonts, including from Google Fonts and other font libraries, and self-hosted fonts. You should choose the method recommended by the font library you're using. These are the steps to add a custom font for the two most common methods:

• Using at-rules (e.g. @import or @font-face) Head to the My organisation page and scroll down to the Custom tags section. Click Add style tag and paste your @import or @font-face statement(s) into the Tag content field.

• Using <link> tags Head to the My organisation page and scroll down to the Custom tags section. Click Add link tag and use the Add attribute button to add attributes for each of the attributes required for your link tag, specifying a name and value for each.

Adding a favicon

Favicons are the small icons that display next to the title of a webpage in the browser tab for the page; they help users to find the relevant tab in a browser window. To add your own favicon:

• Head to the My organisation page, scroll down to the Custom tags section and cilck Add link tag.

• Click the Add attribute button and specify the Attribute name as rel and Attribute value as icon.

• Add another attribute, this time with a name type and value image/x-icon.

• Add a final attribute, with name href and set the value to the URL of your favicon .ico file. For most websites this will be at https://www.yourwebsite.com/favicon.ico.

Quickly update the spacing of your Links

All of the padding and margin values in Action Link interfaces are relative to the font-size value of the html element, which defaults to 16px. You can therefore quickly update the general spacing of your interfaces by setting a new font-size value for the html element. For example, to increase the spacing you could add the following to a style tag:

html { font-size: 18px; }

Updating the Body font size setting on the My organisation page will update the font-size value for the body element, thus affecting only text and not spacing.