Fonts

The main typeface is Segoe UI. Selawik is an open source text font that can be used as a fallback to Segoe UI.

Segoe UI

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Selawik

Lorem Ipsum

Dolor sit amet

Sizes

There are nine type sizes in Winstrap. T1 is the largest, and T9 is the smallest. Winstrap type sizes are responsive.

Type classes

All Bootstrap classes are available. You may also use Winstrap type classes if you would like to more explicitly be connected to Microsoft design language. Responsive font-size, font-weight, and line-height are set by these classes. The Winstrap type classes are type-*.

<div class="type-t1">T1</div>
    
    <div class="type-t2">T2</div>
    
    <div class="type-t3">T3</div>
    
    <div class="type-t4">T4</div>
    
    <div class="type-t5">T5</div>
    
    <div class="type-t6">T6</div>
    
    <div class="type-t7">T7</div>
    
    <div class="type-t8">T8</div>
    
    <div class="type-t9">T9</div>

Type mixins

By default, line-height is not set by the mixins below. If you want to apply the MDL line-height, you can pass the set-line-height argument. You can also pass the responsive argument to make the text responsive.

.selector {
        @include type(t[1-9], [set-line-height] [responsive]);
    }

Headings

Winstrap headings are responsive. By default, <h1> to <h6> are mapped to Winstrap heading controls.

You can also apply headings using the Sass mixin. Headings applied using the mixin are not responsive by default. Pass the responsive argument to make them responsive.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
    <div class="h1">...</div>
    <div class="type-h1">...</div>
    
    <h2>Heading 2</h2>
    <div class="h2">...</div>
    <div class="type-h2">...</div>
    
    <h2>Heading 3</h2>
    <div class="h3">...</div>
    <div class="type-h3">...</div>
    
    <h2>Heading 4</h2>
    <div class="h4">...</div>
    <div class="type-h4">...</div>
    
    <h2>Heading 5</h2>
    <div class="h5">...</div>
    <div class="type-h5">...</div>
    
    <h2>Heading 6</h2>
    <div class="h6">...</div>
    <div class="type-h6">...</div>

.selector {
        @include type-control(h[1-6], [responsive]);
    }

Subheadings

There are six Winstrap subheading controls. We recommend pairing type-h1 with type-sh1, type-h2 with type-sh2, etc.

You can also apply subheadings using the Sass mixin. Subheadings applied using the mixin are not responsive by default. Pass the responsive argument to make them responsive.

Subheading 1

Subheading 2

Subheading 3

Subheading 4

Subheading 5

Subheading 6

<div class="type-sh1">Subheading 1</div>
    
    <div class="type-sh2">Subheading 2</div>
    
    <div class="type-sh3">Subheading 3</div>
    
    <div class="type-sh4">Subheading 4</div>
    
    <div class="type-sh5">Subheading 5</div>
    
    <div class="type-sh6">Subheading 6</div>

.selector {
        @include type-control(sh[1-6], [responsive]);
    }

Paragraphs

There are four paragraph controls in Winstrap. <p> is mapped to type-p3.

You can also apply paragraphs using the Sass mixin. Paragraphs applied using the mixin are not responsive by default. Pass the responsive argument to make them responsive.

Paragraph 1

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.

Paragraph 2

Paragraph 3

Paragraph 4

<p class="type-p1">Paragraph 1</p>
    
    <p class="type-p2">Paragraph 2</p>
    
    <p>Paragraph 3</p>
    <p class="type-p3">...</p>
    
    <p class="type-p4">Paragraph 4</p>

.selector {
        @include type-control(p[1-4], [responsive]);
    }

Captions

Like other Winstrap type controls, captions can be applied using the type classes or the Sass mixin. Captions applied using the mixin are not responsive by default. Pass the responsive argument to make them responsive.

Caption 1

Caption 2

<p class="type-c1">Caption 1</p>
    
    <p class="type-c2">Caption 2</p>

.selector {
        @include type-control(c[1-2], [responsive]);
    }

Glyphs

There are 259 free and open source glyphs included in Winstrap. Here are the available glyphs with their respective names. To display a glyph, add the glyph base class and the individual glyph-* class.

<span class="glyph glyph-[glyph-name]" aria-hidden="true"></span>

Glyphs can also be displayed using the glyph Sass mixin:

.selector {
        &::before {
            @include glyph( [glyph-name] );
        }
    }

If you only need to get a glyph's unicode value, you can use the Sass function:

.selector {
        font-family: "winjs-symbols";
    
        &::before {
            content: glyph( [glyph-name] );
        }
    }

chevron-up

chevron-down

checkmark

star

magnifier

semantic-zoom

arrow-left

arrow-right

chevron-left

chevron-right

chevron-up-2

chevron-down-2

checkmark-2

star-outline

chevron-right-2

chevron-left-2

previous

next

play

pause

edit

edit-mirrored

save

clear

delete

remove

add

cancel

accept

more

redo

undo

home

up

forward

back

favorite

camera

settings

video

sync

download

mail

magnifier-2

help

help-mirrored

upload

emoji

two-page

leave-chat

mail-forward

clock

send

crop

rotate-camera

people

close-pane

close-pane-mirrored

open-pane

open-pane-mirrored

world

flag

preview-link

globe

trim

attach-camera

zoom-in

bookmarks

bookmarks-mirrored

document

protected-document

page

multi-select

multi-select-mirrored

comment

mail-2

contact-info

contact-info-mirrored

hang-up

view-all

map-pin

phone

video-chat

switch

contact

rename

pin

music-info

go

go-mirrored

keyboard

dock-left

dock-left-mirrored

dock-right

dock-right-mirrored

dock-bottom

remote

refresh

rotate

shuffle

list

list-mirrored

shop

select-all

orientation

import

import-mirrored

import-all

import-all-mirrored

browse-photos

webcam

picture

save-local

caption

stop

show-results

show-results-mirrored

volume

repair

message

page-outline

calendar-day

calendar-week

calendar

calendar-mirrored

characters

mail-reply-all

mail-reply-all-mirrored

mail-read

link

accounts

show-bcc

hide-bcc

cut

attach

paste

filter

copy

emoji-2

important

mail-reply

mail-reply-mirrored

slideshow

sort

manage

all-apps

all-apps-mirrored

disconnect-drive

map-drive

new-window

open-with

open-with-mirrored

contact-presence

priority

upload-2

go-to-today

font

font-color

contact-2

folder-fill

audio

placeholder

view

set-lockscreen

set-tile

cc

stop-slideshow

permissions

highlight

disable-updates

unfavorite

unpin

open-local

mute

italic

underline

bold

move-to-folder

like-dislike

dislike

like

align-right

align-center

align-left

magnifier-3

zoom-out

open-file

other-user

admin

street

map

clear-selection

clear-selection-mirrored

font-decrease

font-increase

font-size

cellphone

reshare

tag

repeat-once

repeat-all

star-outline-2

star-2

calculator

directions

location

library

phonebook

memo

microphone

post-update

back-to-window

fullscreen

new-folder

calendar-reply

unsync-folder

report-hacked

sync-folder

block-contact

switch-apps

add-friend

touch-pointer

go-to-start

zero-bar

one-bar

two-bars

three-bars

four-bars

scan

preview

hamburger

checkbox-composite

checkbox-indeterminate

erase-tool

warning

shopping-cart

flag-2

folder-open

folder

completed

music-album

info

devices

expand

collapse

radio-btn-off

radio-btn-on

radio-bullet

media-browse

miracast-small

miracast-large

playback-rate-1x

playback-rate-other

subscription-add

subscription-add-mirrored

subscriptions

subscriptions-mirrored

folder-horizontal-open

folder-horizontal

Typography

Fonts

Segoe UI

Lorem Ipsum

Selawik

Lorem Ipsum

Sizes

Type classes

Type mixins

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Subheadings

Paragraphs

Captions