CSS Variables
Amondo exposes a wide range of CSS custom properties via the SDK, giving you full control over how Imprints look and feel within your digital environment. You can override layout, colours, typography and styling for specific components using your own stylesheet, all without modifying the SDK itself.
Use this guide to understand which variables are available and how to apply them.
How to use
To customise an Imprint:
Add the desired CSS variables to your global stylesheet or inline styles.
Apply them to the container wrapping the Amondo Imprint embed.
Variables will automatically be applied by the SDK.
/* Example */
:root .amondo-sdk-container {
--amo-font-size-base: 18px;
--amo-carousel-arrow-background-color: #ffffff;
}To customise multiple SDK on the page independently, use custom class .amondo-sdk-container-${imprintId}
:root .amondo-sdk-container-1a6baa8f-f78b-4429-a8c3-470b5a98d153 {
--amo-font-size-base: 18px;
--amo-carousel-arrow-background-color: #ffffff;
}
:root .amondo-sdk-container-bc719aca-88a9-4b41-8185-dc713f2ebf93 {
--amo-font-size-base: 24px;
--amo-carousel-arrow-background-color: #000000;
}Base variables
--amo-font-size-base
16px
Base font size
--amo-mobile-popup-gradient-color
var(--amo-color-black)
Gradient background colour for mobile popups
--amo-primary-roundness
12px
--amo-secondary-roundness
8px
--amo-color-button
var(--amo-color-white)
--amo-color-button-text
var(--amo-color-black)
--amo-color-button-icon
var(--amo-color-button-text)
Imprint formats
Layout
--amo-grid-spacing-desktop
var(--amo-grid-gap-desktop)
Grid spacing on desktop
--amo-grid-spacing-mobile
var(--amo-grid-gap-mobile)
Grid spacing on mobile
Carousel
--amo-carousel-arrow-border-radius
50%
Border radius of arrows
--amo-carousel-arrow-background-color
transparent
Background colour of arrows
--amo-carousel-progress-active-color
var(--amo-color-accent, --amo-color-blue)
Progress indicator (active)
--amo-carousel-max-width
1200px
Max width of carousel
--amo-carousel-arrow-border-color
no default value
--amo-carousel-arrow-color
no default value
--amo-carousel-progress-inactive-color
no default value
Stories
--amo-story-inner-ring-color
var(--amo-color-white)
Inner ring colour
--amo-story-outer-ring-color
var(--amo-color-accent)
Outer ring colour
--amo-story-border-radius
50%
Shape of story items
--amo-story-background-color
var(--amo-color-accent)
Background colour
--amo-story-size-mobile
60px
Size on mobile
--amo-story-size-desktop
90px
Size on desktop
--amo-story-spacing
16px
Spacing between stories
--amo-story-title-font
var(--amo-system-font, 'Inter, sans-serif')
Font for story titles
--amo-story-title-color
var(--amo-color-black)
Colour of story titles
--amo-story-title-size
0.75em
Size of story titles
Gallery
--amo-pagination-bar-background
var(--amo-color-system-background)
--amo-pagination-bar-border-radius
var(--amo-secondary-roundness)
--amo-pagination-bar-font
var(--amo-system-font, 'Inter, sans-serif')
--amo-pagination-bar-button-border-radius
var(--amo-secondary-roundness)
--amo-pagination-bar-button-background
var(--amo-color-system-background)
--amo-pagination-bar-button-text-hover-color
unset
--amo-pagination-bar-button-text-color
var(--amo-color-details-text-secondary)
--amo-pagination-bar-selected-page-button-background-color
var(--amo-color-accent)
--amo-pagination-bar-selected-page-button-text-color
var(--amo-color-tile-text-primary)
--amo-pagination-scroll-top-offset
200px
Tiles
General
--amo-tile-border-radius
var(--amo-primary-roundness)
Tile shape
--amo-tile-background-color
var(--amo-color-accent)
Background colour
--amo-mobile-author-color
var(--amo-color-white)
Author text colour on mobile
Frame
--amo-frame-background-color
var(--amo-color-black)
Frame background
--amo-frame-font
Inter, sans-serif
Default font
--amo-frame-arrow-background-color
rgba(255, 255, 255, 0.1)
Arrow background (default)
--amo-frame-arrow-active-background-color
rgba(255, 255, 255, 0.2)
Arrow background (active)
--amo-frame-arrow-border-color
rgba(255, 255, 255, 0.1)
Border colour
--amo-frame-arrow-border-radius
50%
Shape of arrows
--amo-frame-avatar-border-radius
50%
Avatar shape
--amo-frame-button-border-radius
var(--amo-secondary-roundness)
Button shape
--amo-frame-button-font
Inter, sans-serif
Button font
--amo-frame-button-color
var(--amo-color-button-text)
Button text
--amo-frame-button-background-color
var(--amo-color-button)
Button background
--amo-frame-icon-color
var(--amo-color-white)
Icon colour
--amo-frame-mobile-padding
100px
Bottom padding for the mobile frame
Media tile
--amo-media-tile-text-font
Inter, sans-serif
Font
--amo-media-tile-text-color
var(--amo-color-white-80)
Text colour
Text tile
--amo-text-tile-text-color
var(--amo-color-tile-text-primary)
Text colour
--amo-text-tile-text-font
Inter, sans-serif
Text font
Quiz tile
--amo-quiz-tile-title-font
Inter, sans-serif
Title font
--amo-quiz-tile-title-color
var(--amo-color-white)
Title colour
--amo-quiz-tile-title-with-background-title-color
var(--amo-color-black)
Title on coloured background
--amo-quiz-tile-title-with-background-background-color
var(--amo-color-white)
Background colour for quiz titles
--amo-quiz-tile-title-font-size-mobile
1em
Title font size on mobile
--amo-quiz-tile-title-font-size-desktop
1.5em
Title font size on desktop
--amo-quiz-tile-title-font-weight
700
Title font weight
--amo-quiz-tile-title-padding-mobile
4px
Title padding on mobile
--amo-quiz-tile-title-padding-desktop
8px
Title padding on desktop
--amo-quiz-tile-button-font-size-mobile
0.75em
Button font size on mobile
--amo-quiz-tile-button-font-size-desktop
1em
Button font size on desktop
--amo-quiz-tile-button-padding-mobile
2px 12px
Button padding on mobile
--amo-quiz-tile-button-padding-desktop
8px 16px
Button padding on desktop
Quiz leaderboard
--amo-leaderboard-progress-color
var(--amo-color-accent)
Progress bar colour
--amo-leaderboard-progress-height
16px
Progress bar height
--amo-leaderboard-progress-radius
16px
Progress bar roundness
--amo-leaderboard-tooltip-color
var(--amo-color-accent)
Tooltip colour
--amo-leaderboard-tooltip-padding
6px 12px
Tooltip padding
--amo-leaderboard-tooltip-font-size
16px
Tooltip font size
--amo-leaderboard-progress-background-opacity
20%
Background opacity
--amo-leaderboard-tooltip-text
var(--amo-color-tile-text-primary)
Tooltip text colour
--amo-leaderboard-tooltip-radius
8px
Tooltip roundness
--amo-leaderboard-tooltip-font
var(--amo-system-font)
Tooltip font
Poll tile
--amo-poll-title-color
var(--amo-color-white)
Title colour
--amo-poll-label-color
var(--amo-color-white-80)
Label colour
--amo-poll-description-color
var(--amo-color-white-80)
Description colour
Poll options
--amo-poll-option-radius
12px
Option shape
--amo-poll-option-text-title
var(--amo-color-black)
Option title text
--amo-poll-option-text-description
var(--amo-color-black)
Option description text
--amo-poll-option-text-primary
var(--amo-color-blue-600)
Primary option text
--amo-poll-option-bg-voted-for
var(--amo-color-blue-100)
Background when selected
--amo-poll-option-bg-not-voted-for
var(--amo-color-zinc-200)
Background when not selected
--amo-poll-option-border
var(--amo-color-blue-600)
Option border colour
--amo-poll-option-background
var(--amo-color-white)
Background colour
--amo-poll-option-confirm-button-bg
var(--amo-color-blue-600)
Confirm button background
--amo-poll-option-confirm-button-text
var(--amo-color-white)
Confirm button text colour
--amo-poll-option-cancel-button-text
var(--amo-color-black)
Cancel button text colour
--amo-poll-option-cancel-primary-button-bg
#e4e4e7
Cancel primary button bg
--amo-poll-option-cancel-secondary-button-bg
#a1a1aa
Cancel secondary button bg
Last updated