Style guide

Typography

Headings

Elements

h1
Heading 1
h2
Heading 2
h3
Heading 3
h4
Heading 4
h5
Heading 5
h6
Heading 6

Variations - class names

h1.sub-title

Part-Time Web Development Courses in Toronto

.title-background
Our Alumni
.title-product.title-location
Web DevelopmentToronto
.section-title-alternative
Dates and Costs
.title-student-name-story
Allison Wong-Baxter
.title-blog-full
Paving the Way for Income Share Agreements in Canada

Body text

Elements

blockquote
To me, what we are doing at Juno is only worthwhile if it’s innovative. If I’m not free to implement the latest innovations, technologies, learnings from research, and best practices at Juno, I’m just not interested.”
p
At Juno, we craft custom learning journeys that accelerate careers. We’ll tailor a learning path for you based on your interests, talents, resources and goals – and that training continues until you land a job making $50K a year or more. It doesn’t matter whether that takes weeks, months or years, we’re with you until you’re employed. And until we make good on our promise, you’ll only pay us $1. We know, we know – finally, a school that gets it.

Variations - class names

.stat-individual
11,594
.related-posts
Related posts
.show-more-related
Load more posts
.show-more-related-alternative
Load more posts

Decorative

Class names

.filter-btn
All Posts
.filter-btn.active
.link-arrow .link-arrow-custard
.link-arrow .link-arrow-white

Transitions

Examples of our different transition timings. Hover over demonstrations to see timing in action.

Variable Name

Demonstration

$default-duration

0.3s

$fast-duration

0.2s

$slow-duration

0.4s

$slowest-duration

0.6s

Anchors styled as Buttons

These classes are meant to be used in Markdown fields. If you need to code in a button, use the Button component.

Class Names

HTML Copy

Example

.btn
<a href="https://junocollege.com/style-guide-typography/" class="btn">Anchor link text</a>
.btn .redbg-white
<a href="https://junocollege.com/style-guide-typography/" class="btn redbg-white">Anchor link text</a>
.btn .transparent-red
<a href="https://junocollege.com/style-guide-typography/" class="btn transparent-red">Anchor link text</a>
.btn .transparent-violet
<a href="https://junocollege.com/style-guide-typography/" class="btn transparent-violet">Anchor link text</a>