Styles
Grid
CSS Utilities
Components

Typography

Typeface
Kumbh Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
H1

Get every agent to say what works at the push of a button

H2

Get every agent to say what works at the push of a button

H3

Get every agent to say what works at the push of a button

H4

Get every agent to say what works at the push of a button

H1 Class
Get every agent to say what works at the push of a button
H2 Class
Get every agent to say what works at the push of a button
H3 Class
Get every agent to say what works at the push of a button
H4 Class
Get every agent to say what works at the push of a button
Typeface
Open Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Lede

Balto listens to both sides of a conversation and visually prompts agents with the best things to say, live on every call.

Paragraph

Balto listens to both sides of a conversation and visually prompts agents with the best things to say, live on every call.

Small Text

Balto listens to both sides of a conversation and visually prompts agents with the best things to say, live on every call.

Ordered List
  1. Close More Deals
  2. Put Customers at Ease
Unordered List
  • Close More Deals
  • Put Customers at Ease

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.

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.
  • 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.
  • 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.

Color

Dark Knight

#182337

Blurple

#4D64FF

Sunshine

#FFCC00

Coral

#E65542

Electric Mint

#03D8BF

Crocus

#855EF7

Northern Lights

#5B70FF, #82EFE0

Sunray

#FFCC00, #E65542

Parchment

#F4F4F4

White

#FFFFFF

Soft Gradient

#E6FAFF, #EDE3FF

Buttons

Primary Button - Standard Size
Primary
Primary Button - Small Size
Primary
Secondary Button  - Standard Size
Secondary
Secondary Button  - Small Size
Secondary
Tertiary Button - Standard Size
Tertiary
Tertiary Button - Small Size
Tertiary
Text Link
Text Link
Text Link with Icon
Text Link
Primary Button - Standard Size
Primary
Primary Button - Small Size
Primary
Secondary Button  - Standard Size
Secondary
Secondary Button  - Small Size
Secondary
Tertiary Button - Standard Size
Tertiary
Tertiary Button - Small Size
Tertiary
Text Link
Text Link

Forms

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Cards

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Link

Getting Started

Columns need to be nested within  a "row" and a direct child of a "container".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined. 

col
col
col
col
col
col
col
col
col
col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

 no-gutters
no-gutters
no-gutters
no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.

col
col
col
col

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

col-lg-1
col-lg-11
col-lg-2
col-lg-10
col-lg-3
col-lg-9
col-lg-4
col-lg-8
col-lg-5
col-lg-7
col-lg-6
col-lg-6
col-lg-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4
col-8
col-6
col-6
col-3
col-2
col-7

Vertical Alignment

Align-Start

To align columns from the top, combine a class of  "align-start" preceded by the class of "row"

align-start
align-start
align-start

Align-Center

To align columns from the center, combine a class of  "align-center" preceded by the class of "row"

align-center
align-center
align-center

Align-End

To align columns from the bottom, combine a class of  "align-end" preceded by the class of "row"

align-end
align-end
align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of  "justify-start" preceded by the by class of "row"

justify-start
justify-start

Justify-Center

To align columns from the right, combine a class of  "justify-center" preceded by the class of "row"

justify-center
justify-center

Justify-End

To align columns from the right, combine a class of  "justify-end" preceded by the class of "row"

justify-end
justify-end

Justify-Between

To evenly space columns between each-other, combine a class of  "justify-between" preceded by the class of "row"

justify-between
justify-between

Justify-Around

To evenly space columns around each-other, combine a class of  "justify-around" preceded by the class of "row"

justify-around
justify-around

Self-Align Columns

To individually self-align columns, combine a class of  "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start
self-center
self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

order-last
order-first

Column Extra Padding

To add extra inner padding to columns, combine a class of either "extra-pad-left", "extra-pad-right", preceded by the by class of "col"

extra-pad-right
extra-pad-left

Spacing

No Margin
Bottom Margin Small
Bottom Margin Medium
Bottom Margin Large
Bottom Margin Extra Large
Top Margin Extra Large
Top Margin Large
Top Margin Medium
Top Margin Small
No Padding
Padding Small
Padding Medium
Padding Large
Padding Extra Large
Padding Top Small
Padding Top Medium
Padding Top Large
Padding Top Extra Large
Padding Top None
Padding Bottom None
Padding Bottom Small
Padding Bottom Medium
Padding Bottom Large
Padding Bottom Extra Large

Text

text-primary
text-primary
text-dark
text-gray
text-center
text-right
text-left
d-none
font-heading
font-body

Other

overflow-hidden
overflow-visible
d-none
d-block
d-flex
sr-only
sr-only
sr-only
Slide Up Animation
Add-a-field Unhide

Internet Explorer Card Fixes

Set both the 'card' and 'card-body' classes to display:block only in IE to prevent text overflow and layout shift issues due to Flexbox.

Learn More

Hero Layouts

Special Layouts

See What Our Customers Have to Say:

Divider Header

General Layouts

The New Way of Getting Conversations Right

Start improving conversations when it matters most: In the moment. Get more sales and happier customers in just 45 days with Real-Time Guidance.

Learn More

See It In Action

It's hard to believe it until you see it

30%

%

Increase in Sales

30%

%

Increase in Sales

30%

%

Increase in Sales

30%

%

Increase in Sales

30+

%

Integrations

100+

%

Customers

4.8 Stars

%

Increase in Sales

30%

%

Increase in Sales

See It In Action

It's hard to believe it until you see it

hello@balto.ai

See It In Action

It's hard to believe it until you see it

Get a Demo

See It In Action

It's hard to believe it until you see it

Get a Demo

See How Balto Can Make Your Calls Excellent. At the Push of a Button

Get a Demo