Before completing this authoring cards tutorial, we highly recommend you complete the prerequisite Introduction to the workbench tutorial.
This tutorial refers to the theme editor, however product managers, product owners, and client engineers may like to explore other SDK configuration options in: Integrate the SDKs
Team members responsible for the authoring cards can also complete the Authoring Cards tutorial.
How cards render in your apps is highly configurable.
The styling of containers, streams, cards, and associated states (such as loading and error) are all configured when integrating the SDK, or in the Theme editor.
The Theme editor is located at
A stream container is embedded in one or more of your apps, and renders a single collection of cards, which we call a stream.
Each stream container also renders a single theme (or two, if using dark mode).
Editing theme elements
Permission to view & edit themes can be configured by your account owner. Contact them for access, if you can not access the theme editor.
Within the Theme editor — as with the card editor — as you edit the elements on the left, a preview of the web SDK is presented on the right.
The 250+ editable elements of the theme are divided into five categories in the UI:
- Variables: Allows quick updates across multiple elements at once.
- Containers: The Container of streams and subviews.
- Top-level card: The default view of a card.
- Subview: The secondary layout, accessed by link-buttons on the top-level.
- System: All other system elements, including states, feedback, accessibility, and footer elements.
There are three types of Variables that can be used throughout the theme:
- When naming colors it’s useful to align them with your branding or design system naming conventions – eg.
Secondaryetc. Colors used for alerts can be named semantically – eg.
- When naming fonts it’s useful to align you branding or design system, or by their font family name and weight – eg.
Inter 700. This makes it easier to identify what weight and style should be set on each element.
ttfformat for URLs.
- The weight is either
- The style is either
- As with Colors and Fonts, naming that aligns with your branding or design system helps consistency – eg.
See our Help Docs on the Theme Editor for more details on the other 250+ editable elements.
By default all elements are supported across web, iOS and Android platforms.
Images and videos are all supported, but different SDKs support different formats. See the Supported media formats table for more information.
Exceptions are presented with a platform icon next to the editable element, indicating which specific platforms are supported.
Use the preview switcher to look at your specific cards, and see what they will look like with that theme applied.
The preview in the workbench shows what the card will look like in the Web SDK. The iOS and Android platforms might render elements differently, as explained in Platform support.
Theme JSON Object
Each theme is actually a JSON object. If you are more comfortable editing code, you may like to access this to make bulk edits by selecting the overflow menu (3 vertical dots) and then
See the Style Reference in our docs to dig deeper on what each of these elements are.
Themes are configured within containers and streams.
Themes are referenced in a container — which is where you also reference the stream of cards the container renders.
Locate these at
After saving theme changes, to preview them on the demo apps, you'll need to hard refresh the app twice to update any theme changes you make.
A container has a minimum of one theme, plus the option of enabling dark mode. These can be configured to automatically render according to the customer’s OS appearance settings.
Learn more about display options in our Integrating the SDKs tutorial.
Dynamic font scaling
The Atomic iOS and Android SDKs support dynamic font scaling. When enabled, this allows typography styles that opt-in to dynamic scaling to respond to the font size preference set by the customer on their device.
To opt-in, select a specific text element (eg.
Text) and switch
Dynamic scaling on. Optionally specify a minimum and maximum font size.
Learn more about Dynamic font scaling.
Alternate text is supported on all image and video components. You can supply a description of an image or video when authoring a card. Alternate text forms part of a description that is passed to the system screen reader (when enabled).
Learn more about Alternate text.
The Atomic Web SDK allows you to customize the focus ring used to highlight components when a user tabs through a stream container or single card view. The focus ring is rendered as a solid outline around the active component, and only appears when the user tabs between components using their keyboard.
To customize the focus ring:
- Open the Atomic Workbench.
- Navigate to the Theme editor.
- Select a theme and then choose
There are two options you can customize for the focus ring color:
Feed: refers to the screen displaying the card list or single card;
Subview: all other screens in the SDK.
Learn more about Accessibility.