Components

NOTE: This page assumes you’ve got a basic understanding of HTML tags — if you want to learn HTML, here are some guides: Intro to HTML + Basic HTML tags

Using CSS Classes

CSS classes are a way to apply pre-defined styles and features to HTML tags. You use most of Baseline’s components by adding CSS classes to your code.

You can add CSS classes by viewing your HTML, which might look something like this:

<p>This is a sample paragraph.</p>

and then, if you wanted to make the text bigger, you could add a “text-large” class like this:

<p class="text-large">This is a sample paragraph.</p>

Text Classes

Body Text Sizes

Class Name	Example
`text-small`	Small text.
`text-large`	Large text.
`text-large2`	Larger text.
`text-large3`	Even larger text.

Text Style — Titles

Note: The different title classes are intended to give the same approximate visual size to titles and headlines of varying length — title0 is good for short, one-word titles, while title4 is good for longer multi-word titles.

Class Name	Example
`title0` (1-2 words)	Short Title
`title1` (1-4 words)	A Longer Title
`title2` (2-6 words)	An Even Longer Title
`title3` (3-8 words)	This Title Is Longer Than The Last
`title4` (5-10 words)	This Title Is Practically A Sentence

Text Style — Lead Paragraph

Note: the “lead” classes are useful for making paragraphs of text larger, like when you want to make the first paragraph larger to entice readers to start reading a large block of text. They are a combination of size and lineheight classes.

Class Name	Example
`text-style-lead`	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
`text-style-lead2`	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
`text-style-lead3`	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Text Color

Note: [color] corresponds to a color “slug” defined in your site’s Color settings, available under Appearance > Color.

Class Name	Example
`text-[color]`, ex: `text-blue`	Blue text.
`text-orange`	Orange text.
`text-light`	Light text to constrast with a dark background.
`text-dark`	Dark text to contrast with a light background.

Font

Note: these classes refer to the fonts defined in your site’s Fonts settings, available under Appearance > Fonts.

Class Name	Example
`text-font-display`	This is the site’s “display” font.
`text-font-body`	This is the site’s body text font.
`text-font-secondary`	This is the site’s accent font for secondary and meta text.

Text Alignment

Note: Distinct alignment classes for different screen sizes are also included.
Examples: mobile-text-right, tablet-text-center, desktop-text-left, etc.

Class Name	Example
`text-left`	Left-aligned text.
`text-center`	Center-aligned text.
`text-right`	Right-aligned text.

Typography

Class Name	Example
`text-caps`	Capitalized text.
`text-small-caps`	Small caps.

Decoration

Note: [color] corresponds to a color “slug” defined in your site’s Color settings, available under Appearance > Color.

Class Name	Example
`text-underline-thick-[color]`, ex: `.text-underline-thick-orange`	Thick underline.
`text-highlight` + background color	Highlighted text w/ background color.

Button Classes

Note: all button classes require the core “button” class in addition to any extra modifying classes. For example:
<a class="button button-small">Sample</a>

Class Name	Example
`button button-small`	Smaller button
`button`	Normal Button
`button arrow-right button arrow-down`	Button w/ arrow
`button button-large`	Larger button
`button button-primary`	Primary button

Spacing Classes

Bottom Margin

Class Name	Example
`margin-bottom-none`	No bottom margin
`margin-bottom-small`	Small bottom margin
`margin-bottom-normal`	Normal bottom margin
`margin-bottom-medium`	Medium bottom margin
`margin-bottom-large`	Large bottom margin
`margin-bottom-huge`	Huge bottom margin

Padding

Class Name	Example
`padding-tiny`	Lil’ padding
`padding-small`	Small padding
`padding-normal`	Normal padding
`padding-medium`	Medium padding
`padding-large`	Large padding
`padding-huge`	Huge padding
`padding-gigantic`	Gigantic padding

*Update Dec 2020

Column Classes

Baseline’s column system loosely follows a 10-column grid, with the ability to use different columns configurations on different screen sizes.

Columns for large screens

Desktop computers, laptops, large tablets (more than 900 pixels wide)
desktop-column-1, desktop-column-2, desktop-column-3, desktop-column-4, desktop-column-5, desktop-column-6, desktop-column-7, desktop-column-8, desktop-column-9, desktop-column-10 (25%) desktop-column-2_5, (75%) desktop-column-7_5 (33%) desktop-column-3_3, (66%) desktop-column-6_6

Columns for medium screens

Medium and small tablets, large mobile phones (720–900 pixels wide)
tablet-column-2_5, tablet-column-3, tablet-column-3_3, tablet-column-4, tablet-column-5, tablet-column-6, tablet-column-6_6, tablet-column-7, tablet-column-7_5, tablet-column-10

Columns for small screens

Medium and small mobile phones (less than 720 pixels wide)
mobile-column-2_5, mobile-column-3_3, mobile-column-5, mobile-column-6_6, mobile-column-7_5, mobile-column-10

Deprecated Column Classes
Columns for large screens
Desktop computers, laptops, large tablets (more than 900 pixels wide)
c1, c2, c3, c4, c5, c6, c7, c8, c9, c10 c2_5, c7_5 c3_3, c6_6
Columns for medium screens
Medium and small tablets, large mobile phones (720–900 pixels wide)
ct2_5, ct3_3, ct4, ct5, ct6, ct6_6, ct7_5, ct10
Columns for small screens
Medium and small mobile phones (less than 720 pixels wide)
cm2_5, cm3_3, cm5, cm6_6, cm7_5, cm10

Examples: Large-screen columns

desktop-column-10

desktop-column-9

desktop-column-8

desktop-column-2

desktop-column-7_5

desktop-column-2_5

desktop-column-7

desktop-column-3

desktop-column-6_6

desktop-column-3_3

desktop-column-6

desktop-column-4

desktop-column-5

desktop-column-3_3

desktop-column-2_5

Examples: Medium-screen columns

tablet-column-10

tablet-column-7_5

2_5

tablet-column-6_6

tablet-column-3_3

tablet-column-6

tablet-column-4

tablet-column-5

Examples: Small-screen columns

mobile-column-10

mobile-column-7_5

2_5

mobile-column-6_6

3_3

mobile-column-5

Superpage Classes

Note: Most section classes must be applied directly to superpage sections to have an effect.

Title Section

title-section, title-section-60

Makes a superpage section the whole height of the browser window, and vertically centers the content within it. Useful for sections that need to make a big visual impact (like titles).

Expando Section

expando expando-big

Turns a whole superpage section into an expando.