Block Level

Site Colors

$black

$white

$gray-10

$gray-20

$gray-30

$gray-50

$brand-color

Typography

J2 Design (p tag)

J2 Design (h1 tag)

J2 Design (h2 tag)

J2 Design (h3 tag)

J2 Design (h4 tag)

J2 Design (h5 tag)
J2 Design (h6 tag)
Show Code

J2 Design(p tag)

J2 Design(h1 tag)

J2 Design(h2 tag)

J2 Design(h3 tag)

J2 Design(h4 tag)

J2 Design(h5 tag)
J2 Design(h6 tag)

Typography Styles

h1 tag with class .head-1 via @extend %head-1

h1 tag with class .head-2 via @extend %head-2

h1 tag with class .head-3 via @extend %head-3

h1 tag with class .head-4 via @extend %head-4

p tag with class .mod-copy-1 via @extend %mod-copy-1

Show Code

h1 tag with class .head-1 via @extend %head-1

h1 tag with class .head-2 via @extend %head-2

h1 tag with class .head-3 via @extend %head-3

h1 tag with class .head-4 via @extend %head-4

p tag with class .mod-copy-1 via @extend %mod-copy-1

Modules

Layouts

Site Colors

$black

$white

$gray-10

$gray-20

$gray-30

$gray-50

$brand-color

Typography

J2 Design (p tag)

J2 Design (h1 tag)

J2 Design (h2 tag)

J2 Design (h3 tag)

J2 Design (h4 tag)

J2 Design (h5 tag)
J2 Design (h6 tag)
Show Code

J2 Design(p tag)

J2 Design(h1 tag)

J2 Design(h2 tag)

J2 Design(h3 tag)

J2 Design(h4 tag)

J2 Design(h5 tag)
J2 Design(h6 tag)

Typography Styles

h1 tag with class .head-1 via @extend %head-1

h1 tag with class .head-2 via @extend %head-2

h1 tag with class .head-3 via @extend %head-3

h1 tag with class .head-4 via @extend %head-4

p tag with class .mod-copy-1 via @extend %mod-copy-1

Show Code

h1 tag with class .head-1 via @extend %head-1

h1 tag with class .head-2 via @extend %head-2

h1 tag with class .head-3 via @extend %head-3

h1 tag with class .head-4 via @extend %head-4

p tag with class .mod-copy-1 via @extend %mod-copy-1