Navigations
Structures
Buttons / Link / Icons
Text
Functional
Forms / Forms Elements
List / Quote
Logos / Icons
Embeds
Sections
Banners
New - Buttons
Footers

Navbar - Banner [disable]

Navbar - Logo

Navbar - Login [disable]

Navbar - Campains

Get a demo
Button Text

Navbar - Main [disable]

Navbar - New

Navbar - Logo/Links/Cta [disable]

Navbar - Global [disable]

Navbar - UserTrigger

Animation attached to a symbol

Footer - Old [disable]

Footer - New

Footer - New

Vertical spacing
Horizontal spacing
Padding
Ratio
Sections
Grid
Container

Basic classes

Code

Used in The System pages to show class names.

Cod
Class Name

Box

This is used in the The System pages to visualize classes with dimensional values

Box

Grid

[Grid]

Container

[Container]
maxW / 90 rem
[Container] Inner x Large
maxW / 59.25 rem
[Container] Inner x Medium
maxW / 44 rem
[Container] Inner x Small
maxW / 28.5 rem
[Container] Inner x Left
[Container] Inner x Right

Section

[Section] H Wrapper
Desktop / 2.5 rem - Tab 2/rem - Mobile 1.5 rem
[Section] V Wrapper
[Section] V Wrapper x Reduced
[Section] V Wrapper x Small

Vertical

Vertical / 2XS
Vertical / XS
Vertical / S
Vertical / M
Vertical / L
Vertical / XL
Vertical / 2XL
Vertical / 3XL
Vertical / 4XL
Vertical / 5XL
Vertical / 7XL

Horizontal spacing

Horizontal / 2XS
Horizontal / XS
Horizontal / S
Horizontal / M
Horizontal / L
Horizontal / XL
Horizontal / 2XL
Horizontal / 3XL
Horizontal / 4XL
Horizontal / 5XL
Horizontal / 6XL
Horizontal / 7XL

Padding

Padding / 2XS
Padding / XS
Padding / S
Padding / M
Padding / L
Padding / XL
Padding / 2XL
Padding / 3XL
Padding / 4XL
Padding / 5XL

Ratio

Ratio / Panorama
Ratio / Panorama Tab
Ratio / Panorama Mob
Ratio / Landscape
Ratio / Landscape Tab
Ratio / Landscape Mob
Ratio / Standard
Ratio / Standard Tab
Ratio / Standard Mob
Ratio / Tall
Ratio / Tall Tab
Ratio / Tall Mob
Ratio / Skyscraper
Ratio / Skyscraper Tab
Ratio / Skyscraper Mob
Footers

Buttons - Weights

Btn
Primary
Btn x Small
Button Small
Btn x Large
Btn x Outline
Button Outline
Btn x Secondary xx On black
Button Secondary on Black
Btn x Tertiary
Button Tertiary
Btn x Secondary xx Outline
Button Secondary Outline

States

Default
Focus
Hover
Hover focus
Disabled

Flows

Default
Purchse Flow
Destructive
regular flow (default) buttons for over-light theme
default state
hover
clicked
disabled
Default Primary
hover
clicked
disabled
Secondary
hover
clicked
disabled
Tertiary
hover
clicked
disabled
Text Link
Text Link
Arrow Link
Reversed Arrow Link
regular flow (default) buttons for over-dark theme
default state
hover
clicked
disabled
Btn-default - x on black
Primary on blackclickedclickeddisabled
Btn-default - x Secondary
Secondary on blackhoverclickeddisabled
Btn-default - x Tertiary
hoverTertiary clickeddisabled
text-link -
Text LinkText Link
Arrow Link
Reversed Arrow Link

Purchase Flow

Btn - Purchase Euro South Africa Walkthrough
Book a demo
Btn - Purchase Euro-South Africa
Get a demo
Button - Purchase Flow
Try for free
Button - Purchase Flow - On black
Try for free
purchase flow buttons for over-light theme
for use only on screens for purchase & conversion flow include checkout and sage id.
primary primarysecondary secondarytertiary tertiary
hover
clicked
disabled
primary -
hover
clicked
disabled
secondary -
hover
clicked
disabled
tertiary -
hover
clicked
disabled
purchase flow buttons for over-light theme
for use only on screens for purchase & conversion flow include checkout and sage id.
primary primarysecondarytertiary
hover
clicked
disabled
primary -
hover
clicked
disabled
secondary -
hover
clicked
disabled
tertiary -
hover
clicked
disabled
warning
primary -
hover
clicked
disabled
Destructive
hover
clicked
disabled
warning
Destructive destructive
hover
clicked
disabled
primary -
hover
clicked
disabled

Calendly

Button Get Demo - Calendly
Get a demo

Default / Regular Flow

Button - Regular Flow - Secondary

Link

<a>

In The System inline links are styled on the tag level. This way we create a global link style that then can be overriden when needed.

Lnk
Text Link
Heading
Font Size
Align
Line Height
Font
Font Style
Color
Rich Text

Heading

<H1>

H1 Tag

Heading / H1

H1 Class

<H2>

H2 Tag

Heading / H2

H2 Class

<H3>

H3 Tag

Heading / H3

H3 Class

<H4>

H4 Tag

Heading / H4

H4 Class

<H5>
H5 Tag
Heading / H5
H5 Class
<H6>
H6 Tag
Heading / H6
H6 Class

Font Size

Font Size / S

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font Size / M

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font Size / L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font Size / XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Align

Align / Left

This text aligns to the left in desktop breakpoint and smaller ones.

Align / Left Tab

This text aligns to the left in tablet and smaller breakpoints.

Align / Left Mob

This text aligns to the left in in mobile, landscape and portrait.

Align / Center

This text aligns to the center in desktop breakpoint and smaller ones.

Align / Center Tab

This text aligns to the center in tablet and smaller breakpoints.

Align / Center Mob

This text aligns to the center in in mobile, landscape and portrait.

Align / Right

This text aligns to the right in desktop breakpoint and smaller ones.

Align / Right Tab

This text aligns to the right in tablet and smaller breakpoints.

Align / Right Mob

This text aligns to the right in in mobile, landscape and portrait.

Line Height

Line Height / XS

This text has a line-height of 1 (unitless) in desktop breakpoint and smaller ones.

Line Height / XS Tab

This text has a line-height of 1 (unitless) in tablet and smaller breakpoints.

Line Height / XS Mob

This text has a line-height of 1 (unitless) in mobile, landscape and portrait.

Line Height / S

This text has a line-height of 1.25 (unitless) in desktop breakpoint and smaller ones.

Line Height / S Tab

This text has a line-height of 1.25 (unitless) in tablet and smaller breakpoints.

Line Height / S Mob

This text has a line-height of 1.25 (unitless) in mobile, landscape and portrait.

Line Height / M

This text has a line-height of 1.5 (unitless) in desktop breakpoint and smaller ones.

Line Height / M Tab

This text has a line-height of 1.5 (unitless) in tablet and smaller breakpoints.

Line Height / M Mob

This text has a line-height of 1.5 (unitless) in mobile, landscape and portrait.

Line Height / L

This text has a line-height of 1.75 (unitless) in desktop breakpoint and smaller ones.

Line Height / L Tab

This text has a line-height of 1.75 (unitless) in tablet and smaller breakpoints.

Line Height / L Mob

This text has a line-height of 1.75 (unitless) in mobile, landscape and portrait.

Line Height / XL

This text has a line-height of 2 (unitless) in desktop breakpoint and smaller ones.

Line Height / XL Tab

This text has a line-height of 2 (unitless) in tablet and smaller breakpoints.

Line Height / XL Mob

This text has a line-height of 2 (unitless) in mobile, landscape and portrait.

Line Height / 0

Line Height 0

Font

Font / Sage Headline
This is Lato
Font / Sage Text
This is Sage Text
Font / Sage UI
This is Sage UI

Font Style

Font Style / Upper

Uppercase

Font Style / Under

Underline

Font Style / Strike

Strikethrough

Font Style / None

Uppercase

Color

Color / Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Color / Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Color / Tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Color / Neutral

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Color / Bright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Color / White

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich Text

Rte

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Rte

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Functional classes

Bg

Bg / Primary
Bg / Primary Lightest
Bg / Primary Lighter
Bg / Primary Light
Bg / Primary Dark
Bg / Primary Darker
Bg / Primary Darkest
Bg / Secondary
Bg / Secondary Lightest
Bg / Secondary Lighter
Bg / Secondary Light
Bg / Secondary Dark
Bg / Secondary Darker
Bg / Secondary Darkest
Bg / Tertiary
Bg / Tertiary Lightest
Bg / Tertiary Lighter
Bg / Tertiary Light
Bg / Tertiary Dark
Bg / Tertiary Darker
Bg / Tertiary Darkest
Bg / Neutral
Bg / Neutral Lightest
Bg / Neutral Lighter
Bg / Neutral Light
Bg / Neutral Dark
Bg / Neutral Darker
Bg / Neutral Darkest
Bg / Bright
Bg / Bright Lightest
Bg / Bright Lighter
Bg / Bright Light
Bg / Bright Dark
Bg / Bright Darker
Bg / Bright Darkest
Bg / White

Ratio

Ratio / Panorama
Ratio / Panorama Tab
Ratio / Panorama Mob
Ratio / Landscape
Ratio / Landscape Tab
Ratio / Landscape Mob
Ratio / Standard
Ratio / Standard Tab
Ratio / Standard Mob
Ratio / Tall
Ratio / Tall Tab
Ratio / Tall Mob
Ratio / Skyscraper
Ratio / Skyscraper Tab
Ratio / Skyscraper Mob

This div has its display set to inline-block on tablet and smaller breakpoints.

Position

Position / Static

This div has its position set to static on desktop breakpoint and smaller ones.

Position / Static Tab

This div has its position set to static on tablet and smaller breakpoints.

Position / Static Mob

This div has its position set to static on mobile, landscape and portrait.

Position / Relative

This div has its position set to relative on desktop breakpoint and smaller ones.

Position / Relative Tab

This div has its position set to relative on tablet and smaller breakpoints.

Position / Relative Mob

This div has its position set to relative on mobile, landscape and portrait.

Display

Display / Block

This div has its display set to block on desktop breakpoint and smaller ones.

Display / Block Tab

This div has its display set to block on tablet and smaller breakpoints.

Display / Block Mob

This div has its display set to block on mobile, landscape and portrait.

Display / InBlock

This div has its display set to inline-block on desktop breakpoint and smaller ones.

Display / InBlock Tab
Display / InBlock Mob

This div has its display set to inline-block on mobile, landscape and portrait.

Display / Inline

This div has its display set to inline on desktop breakpoint and smaller ones.

Display / Inline Tab

This div has its display set to inline on tablet and smaller breakpoints.

Display / Inline Mob

This div has its display set to inline on mobile, landscape and portrait.

Display / None
Display / None Tab

This div has its display set to none on tablet and smaller breakpoints.

Display / None Mob

This div has its display set to none on mobile, landscape and portrait.

Form Elements

<label>
Txt
Txa
Chb
Rdo
Btn
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Lists

<ol>
<li>
  1. This is a list item
  2. This is a list item
    1. This is a nested list item
    2. This is a nested list item
    3. This is a nested list item
<ul>
<li>
  • This is a list item
  • This is a list item
    • This is a nested list item
    • This is a nested list item
    • This is a nested list item

Blockquote

<blockquote>
Block Quote

Autoentry  Logo

New - Logo
New - Nav Logo
New - Footer Logo
xxxx
This is Sage UI
xxxx
xxxx
This is Sage UI

[Custom] Nav Dropdown Icon Hover

On hover change color form the custom dropdown icon

[Custom] Send Dynamic Page Name

Send dynamic page name with form submittion

[Custom] input[type="submit"]:disabled

Disable Submit button

[Custom] Dynamic Redirection

Contact form Url redirection from CMS

[Custom] Nav Dropdown Box Shadow

CSS code to create the Navigation dropdown box shadow on the new---nav-dropdown__content-wrap class

[Custom] XXXX

XXXXXX

[Custom] XXXX

XXXXXX

[Custom] XXXX

XXXXXX

Heading

AutoEntry Offices

Ireland (EU)

1 Central Park, Leopardstown, Dublin 18, Ireland
D18 NH10
Ireland
‍
+353 1 902 2618

Get directions

United Kingdom (UK)

200 Berkshire Place, Wharfedale Rd, Winnersh, Wokingham
RG41 5RD,
United Kingdom

+353 1 902 2618

Get directions

Phoenix (US)

1715 N Brown Rd, Lawrenceville, Atlanta, GA 30043,
United States

+1 (857) 302 3409

Get directions

Sydney (Aus)

Level 11, Zenith Tower B, 821 Pacific Hwy, Chatswood, NSW 2067
Australia
‍
+61 385 184 347

Get directions

Heading

AutoEntry integrates with top accounting software

QuickBooks logo
Xero logo
Sage logo
FreeAgent logo
View all integrations

Heading

QuickBooks logo
Xero logo
Sage logo
FreeAgent logo
View all integrations

Heading

AutoEntry integrates with HMRC approved accounting software

AutoEntry seamlessly integrates with many of the HMRC compatible accounting software for Making Tax Digital for VAT. Simply connect them and submit your digital records directly to your accounting software.

QuickBooks logo
Xero logo
Sage logo
FreeAgent logo
View all integrations

Campains page development navigation

account-and-bookkeeperssmall-medium-businessintegretionsintegrations/quickbooksintegrations/sagepricingproduct
IE

New - News & Insights template header

  1. Link to All blog page
  2. /
  3. Link to CMS plural names
  4. /
  5. Link to CMS Title
TRENDING ARTICLE

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is some text inside of a div block.

CTA Banner

Smart, accurate, automated.

Get started with AutoEntry in minutes. No credit card required. Cancel whenever you want.

Get a demo
Try for free

Campaign - CTA Banner

Smart, accurate, automated.

Get started with AutoEntry in minutes. No credit card required. Cancel whenever you want.

Get 3 months for free

Single - CTA

A guide to controlling costs in business

Managing your business costs can be a bit of a juggling act. Read this guide for tips to help you stay on top of your costs and keep spending down.

Download your free guide
Default
Purchse Flow
Destructive
regular flow (default) buttons for over-light theme
hover
clicked
disabled
Primary
hover
clicked
disabled
Secondary
hover
clicked
disabled
Tertiary
hover
clicked
disabled
Text Link
Text Link
Arrow Link
Reversed Arrow Link
regular flow (default) buttons for over-dark theme
Primary Secondary Tertiary Text Link
hover
clicked
disabled
primary -
hover
clicked
disabled
secondary -
hover
clicked
disabled
tertiary -
hover
clicked
disabled
text-link -
Text Link
Arrow Link
Reversed Arrow Link
purchase flow buttons for over-light theme
for use only on screens for purchase & conversion flow include checkout and sage id.
primary primarysecondary secondarytertiary tertiary
hover
clicked
disabled
primary -
hover
clicked
disabled
secondary -
hover
clicked
disabled
tertiary -
hover
clicked
disabled
purchase flow buttons for over-light theme
for use only on screens for purchase & conversion flow include checkout and sage id.
primary primarysecondarytertiary
hover
clicked
disabled
primary -
hover
clicked
disabled
secondary -
hover
clicked
disabled
tertiary -
hover
clicked
disabled
warning
primary -
hover
clicked
disabled
Destructive
hover
clicked
disabled
warning
Destructive destructive
hover
clicked
disabled
primary -
hover
clicked
disabled