Typography

HTML tags define default Heading styles.
Heading classes when typography style doesn't match the default HTML tag.

H1

Sample text helps you understand how real text may look.

heading-style-h1

Sample text helps you understand how real text may look.

H2

Sample text helps you understand how real text may look on your website.

heading-style-h2

Sample text helps you understand how real text may look on your website.

H3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
heading-style-h6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

HTML Text Tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present on your website.

all links
Text Link
All quotes
Block Quote
All Unordered Lists
All Ordered Lists

Text Sizes

text-size-huge
48px | 3rem

Large Callout Size.

text-size-xlarge
48px | 3rem

Large Callout Size.

text-size-large
20px | 1.25rem

Subtitle 2
Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-medium
20px | 1.25rem

Subtitle 2
Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-regular
16px | 1rem

Body Text
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small
14px | 0.875rem

Body Small
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-tiny
12px | 0.75rem

Tiny Text
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-tagline
12px | 0.75rem
Tag Line
text-oveline
12px | 0.75rem
Tag Line
This is some text inside of a div block.

Disclaimer! Tables of Contents do not appear in Designer or Preview mode. Only on publish.

To add a table of contents.

  1. Add "Table of Content" component into page
  2. Find the relevant rich text element in your page and tag its PARENT element with the ID "content" in the element settings panel (right side of screen after selecting parent element)

To edit a table of contents component.

For Webmaster only.

  1. DO: Directly edit "toc", "tocitem", "toc-h2", and "Toc-h3" classes.
  2. DO NOT: Stack style classes on top of toc items

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-opacity

text-style-opacity

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link
text-style-quote

Sample text is being used as a placeholder.

text-style-1line

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-xbold
800 Extra Bold
text-weight-bold
700 Bold
text-weight-semibold
600 Semi Bold
text-weight-medium
500 Medium
text-weight-normal
400 Normal
text-weight-light
300 Light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Colors

Manage recurring text and background colors.

Background Colors

Add styles for background colors used on site
background-color-dark
Dark Blue
#001c33
background-color-mint
Mint (phasing out of use)
background-color-blue_gradient
gradient (phasing out)
background-color-blue
800 Primary
#003c6e
background-color-blue-CTA
600 CTA
#006fcc
background-color-blue-card
Card Blue
#cce2f5
background-color-home
Primary Gradient
background-color-gradient
Light Gradient
background-color-black
Black
#181818
background-color-grey
Labster Grey
#f4f5f7
background-color-white
White
#ffffff
background-color-transparent
Transparent
#-----
background-color-extended-blue
background-color-extended-blue
#B3D4F0
background-color-core-primary-labster-blue
background-color-core-primary-labster-blue
#D6EDFF
background-color-core-primary-bright-grey
background-color-core-primary-bright-grey
#F7F8F8

Primary

Core/Primary/gradient

Text Colors

Replace or/and add styles for text colors used on site. Add Background color on item if necessary
text-color-black
Text color is black
#1B1F23
extended/ black/700
text-color-extended-black-700
#494C4F
extended/ black/800
text-color-extended-black-800
#323539
extended/ black/300
text-color-extended-black-300
#525559
extended/ black/500
text-color-extended-black-500
#76797B
extended/ black/200
text-color-extended-black-200
#D1D2D3
extended/ black/100
text-color-extended-black-100
#E8E9E9
core/primary/labster-navy
text-color-core-primary-labster-navy
#003c6e
text-color-white
Text color is white
#252a3b

Shadows and Image Styles

Add styles for Image wrappers used on site (shadows, borders and so)

Buttons

Button combo class system.

button
is-secondary
Button Text
button
is-tertiary
Button Text
link-ico

+

ico
Get pricing
link-ico
text-color-white

+

ico
button-group
row-icon-spaced
row-icons-spaced
1-rem
row-icons-spaced
List Alert
Not widely used
row-icons-spaced
List
This is some text inside of a div block.
This is some text inside of a div block.
row-icons-spaced
List no-pad
This is some text inside of a div block.
This is some text inside of a div block.
row-icons-spaced
List-big-pad
This is some text inside of a div block.
This is some text inside of a div block.
icon-primary
This is some text inside of a div block.
icon_28
This is some text inside of a div block.
icon-primary
size-l
This is some text inside of a div block.
icon-primary
size-xl
This is some text inside of a div block.

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper
main-wrapper
container-large
Large container: 1160px | 72.5rem
container-medium
Medium container: 960px | 60rem
container-small
Small container: 760px | 47.5rem
padding-global
40px | 2.5rem
padding-section-small
48px | 3rem
padding-section-medium
80px | 5rem
padding-section-large
100px | 6.25rem
padding-section-XL
120px | 7.5rem

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxsmall
192px| 12rem
max-width-xsmall
260px | 16.25rem
max-width-small
360px | 22.5rem
max-width-small_plus
416px | 26rem
max-width-medium
496px | 31em
max-width-large
704px | 44rem
max-width-xlarge
864px | 54rem
max-width-xlarge
864px | 54rem

Paddings & Margins

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

Utility classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

padding-0
0 px
margin-0
0 px
padding-0.5rem
8px | 0.5rem
margin-0.5rem
8px | 0.5rem
padding-1rem
16px | 1rem
margin-1rem
16px | 1rem
padding-1.5rem
24px | 1.5rem
margin-1.5rem
24px | 1.5rem
padding-2rem
32px | 2rem
margin-2rem
32px | 2rem
padding-2.5rem
40px | 2.5rem
margin-2.5rem
40px | 2.5rem
padding-3rem
48px | 3rem
margin-3rem
48px | 3rem
padding-3.5
56px | 3.5rem
margin-3.5rem
56px | 3.5rem
padding-4.5rem
72px | 4.5rem
margin-4.5rem
72px | 4.5rem
padding-5rem
80px | 5rem
margin-5rem
80px | 5rem
padding-lightblue
96px | 6rem
margin-lightblue
96px | 6rem
padding-orange
120px | 7.5rem
margin-orange
120px | 7.5rem
padding-bluegray
192px | 12rem
margin-bluegray
192px | 12rem

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

center-all
Centers everything including text. Does not center margins to auto. VERY widely used.
Hide Everything
This element is hidden
hide-desktops_only
Hides everything EXCEPT desktops (hides tablets andphones)
hide-mobile-portrait
not widely used
hide-mobile-landscape
not widely used
overflow-visible
not widely used
overflow-hidden
not widely used
overflow-auto
not widely used
overflow-scroll
not widely used
pointer-events-on
not widely used
pointer-events-off
not widely used
layer
not widely used
div-square
not widely used
spacing-clean
not widely used
align-center
z-index-1
not widely used
z-index-2
not widely used
display-inlineflex
not widely used

Spacers

Unified spacer system for the project.

Spacer
.3rem
Spacer
.5rem
Spacer
.75rem
Spacer
1rem
Spacer
1.25rem
Spacer
1.5rem
Spacer
2rem
Spacer
3rem
Spacer
3.5rem
Spacer
4rem
Spacer
4.5rem
Spacer
5rem

Spacers

Unified spacer system for the project.

spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
spacer-24
spacer-12
spacer-20

Shaders

Unified shader system for the project.

Shadow-2dp
Shadow-8dp
Shadow-24dp
thumbnail-16_9-Rounded
image-border
image-roundcorners
image-circle-168
image-circle-300
image-circle-400

Components

Unified spacer system for the project.

Discover the Power of Labster

Watch our latest product release video.

Heading

This is some text inside of a div block.

Resources

Explore the future ofscience education.

Community Campus

Connect with other Labster educators.

Visit Now

Help Center

Receive around the clock support.

Get Support

VR for Nursing

Discover Labster's VR platform for nursing.

Discover UbiSim

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.

a man sitting in front of a computer monitor
Bring Science to Life
Immersive Learning Simulations

Labster helps universities and high schools enhance student success in STEM.

Request Demo

Discover The Most Immersive Digital Learning Platform.

Request a demo to discover how Labster helps high schools and universities enhance student success.

Request Demo

Labster Ensures Your Success

Integrate With Your Existing LMS

Integrate With Your Existing LMS

Labster sets up your LMS integration or gets you started on our standalone platform.

Enhance Your STEM Curriculum

Enhance Your STEM Curriculum

Labster works with you to match faculty with the most relevant virtual labs and course materials.

Receive Dedicated Ongoing Support

Receive Dedicated Ongoing Support

All subscriptions include support for faculty and students during and after deployment.

Bring Science to Life.

Request Demo

300+ Simulations

Covering gateway courses in high school and higher education, all in the cloud.

Train Lab Skills

Empower students to master labs on simulated equipment.

Bring Science to Life

Engage students by placing them in the shoes of real scientists.

Automate Evaluations

Track student progress and automated grading to target teaching.

Visualize Theory

Help students connect theory and STEM careers with interactive scenarios.

Improve Outcomes

Labster is evidence-based, with a proven impact on improving student success.

Trusted Around the World

Blue Building Icon

1800+

Institutions

Labster Blue Face icon

900k+

Active Students

blue trophy icon

9m+

Played Simulations

blue bookmark icon

35k+

Created Courses

Heading

This is some text inside of a div block.

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 velit esse cillum dolore eu fugiat nulla pariatur.

Webinar

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.

a man and a woman in lab coats holding a flask of green liquid

Discover The Most Immersive Digital Learning Platform.

Request a demo to discover how Labster helps high schools and universities enhance student success.

Request Demo
man with laptop

Frequently Asked Questions

How do students access Labster?

a black and white check mark on a white background

Labster is hosted online, which means that students only have to login from their internet browsers once an account is created. No download needed.

How is Labster purchased?

a black and white check mark on a white background

Labster is only available for purchase by faculty and administration at academic institutions. To procure Labster, simply reach out to us on our website. Schedule a demo, book a meeting to discuss pricing, start a free trial, or simply fill out our contact form.

How is Labster different from other learning solutions?

a black and white check mark on a white background

Labster simulations are evidence-based, and proven to impact student success. Labster is created by real scientists and designed to encourage mastery through active learning.

What types of courses does Labster support?

a black and white check mark on a white background

Labster supports a wide range of courses at the high school and university level across fields in biology, chemistry and physics. Some simulations train lab procedures with advanced, simulated lab equipment, while others are meant to bring theory to life through interactive scenarios.

How are simulations assigned?

a black and white check mark on a white background

Labster simulations are employed in a wide variety of teaching methods, including lab prep, homework, and in-class workshops to name a few. 

Horizontal Flex Utilities

u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

Wrap Utilities

u-hflex-wrap
u-hflex-nowrap
u-vflex-wrap
u-vflex-nowrap

Gap Utilities

u-gap-none
u-gap-4
u-gap-8
u-gap-16
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large

Grid

Grid Utilities

u-grid-custom
u-grid-column-4
u-grid-column-2
u-grid-autofit
u-grid-subgrid
u-column
u-column-full
u-column-indent
This is some text inside of a div block.