Cards

Content

Usage


      {{modules2.cards.content.render(data)}}

Examples

Basic

Some title

By someone, speaking of something

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.

Read at Google

Example data


      title: Some title
byline: 'By someone, speaking of something'
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.
cta:
  url: 'https://google.com'
  text: Read at Google
  isExternal: true
image:
  source: 'https://dummyimage.com/384x177/333/fff'
  isBg: true

No Byline

No byline

Internal Link

Example data


      title: No byline
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.
cta:
  url: 'https://google.com'
  text: Internal Link
image:
  source: 'https://dummyimage.com/384x177/333/fff'
  isBg: true

No copy

By someone

Read at Google

Example data


      title: No copy
byline: By someone
cta:
  url: 'https://google.com'
  text: Read at Google
  isExternal: true
image:
  source: 'https://dummyimage.com/384x177/333/fff'
  isBg: true

No image

By someone, speaking of something

Read at Google

Example data


      title: No image
byline: 'By someone, speaking of something'
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.
cta:
  url: 'https://google.com'
  text: Read at Google
  isExternal: true

Small image

Read at Google

Example data


      title: Small image
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.
cta:
  url: 'https://google.com'
  text: Read at Google
  isExternal: true
image:
  source: 'https://dummyimage.com/96x96/333/fff'
  width: 96
  isBg: false

Resource

Usage


      {{modules2.cards.resource.render(data)}}

Examples

Basic

Article

Some title

Example data


      title: Some title
type: Article
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.
cta:
  url: 'https://google.com'
  isExternal: true
image:
  source: 'https://dummyimage.com/384x177/333/fff'

No type

Some title

Read at Google

Example data


      title: Some title
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.
cta:
  url: 'https://google.com'
  text: Read at Google
  isExternal: true
image:
  source: 'https://dummyimage.com/384x177/333/fff'

Content

Announcementbar

Usage


      {{modules2.content.announcementBar.render(data)}}

Examples

Example data


      text: Some important announcement

Centeredheading

Usage


      {{modules2.content.centeredHeading.render(data)}}

Examples

Basic

Some title

Example data


      title: Some title
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.

No Border

Some title

Example data


      title: Some title
hasBorder: false
copy: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores
  beatae consequuntur eos libero natus qui rerum suscipit tempore ullam, ut
  vitae. Distinctio doloremque hic mollitia nemo placeat soluta tenetur.

With CTA

Some title

Some button

Example data


      title: Some title
cta:
  text: Some button
  url: '#'

Endnotes

Usage


      {{modules2.content.endnotes.render(data)}}

Examples

Basic

Sources

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example data


      title: Sources
notes:
  - >-
    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
    vestibulum.
  - >-
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
    lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem
    lacinia quam venenatis vestibulum.
  - 'Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'

Guides

Usage


      {{modules2.content.guides.render(data)}}

Examples

External Link

Guide Title I

One item
Two item
Three item

Example data


      title: Guide Title I
image: 'https://dummyimage.com/290x290/000/fff'
link:
  url: '#'
  isExternal: true
items:
  - One item
  - Two item
  - Three item

Internal Link

Guide Title II

One item

Example data


      title: Guide Title II
image: 'https://dummyimage.com/290x290/000/fff'
link:
  url: '#'
items:
  - One item

Pullquote

Usage


      {{modules2.content.pullquote.render(data)}}

Examples

With CTA

"Inmigrants helped build this country - and continue to build it every day.

A message from Sheryl Sandberg

Read the article on Facebook

Example data


      text: '"Inmigrants helped build this country - and continue to build it every day.'
byline: A message from Sheryl Sandberg
cta:
  text: Read the article on Facebook
  url: 'https://www.facebook.com/sheryl'
  extraCSS: button-facebook
  isExternal: true

No CTA

"Inmigrants helped build this country - and continue to build it every day.

A message from Sheryl Sandberg

Example data


      text: '"Inmigrants helped build this country - and continue to build it every day.'
byline: A message from Sheryl Sandberg

Recirc

Usage


      {{modules2.content.recirc.render(data)}}

Examples

Basic

Get involved with Lean In

Join one of our Regional chapters

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl ut ex lobortis egestas

Learn more

Create your own Circle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl ut ex lobortis egestas

Start a Circle

Get notified of new Circles in your area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl ut ex lobortis egestas

Example data


      title: Get involved with Lean In
panels:
  - image: >-
      https://pagedata-media.s3.amazonaws.com/2017-08-10/1502402570227/recirc_c.jpg
    icon: star
    title: Join one of our Regional chapters
    subtitle: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
      scelerisque nisl ut ex lobortis egestas
    cta_text: Learn more
    cta_url: 'https://leanincircles.org/top-chapters'
  - image: >-
      https://pagedata-media.s3.amazonaws.com/2017-08-10/1502402210909/recirc_a.jpg
    icon: plus
    title: Create your own Circle
    subtitle: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
      scelerisque nisl ut ex lobortis egestas
    cta_text: Start a Circle
    cta_url: 'https://leanincircles.org/registration/circle/local'
  - image: >-
      https://pagedata-media.s3.amazonaws.com/2017-08-10/1502402210887/recirc_b.jpg
    icon: alert
    title: Get notified of new Circles in your area
    subtitle: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
      scelerisque nisl ut ex lobortis egestas
    cta_text: Sign up
    cta_url: 'https://leanincircles.org/matching'

Sectionheader

Usage


      {{modules2.content.sectionHeader.render(data)}}

Examples

Basic

See #mentorher in action

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Example data


      title: 'See #mentorher in action'
copy: >-
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Flyout


      {{modules2.flyout.link.render(data)}}

Example data


      headline: Title
copy: some copy here
url: 'https://leanin.org'
start: .kit-content

Heros

Primary

Usage


      {{modules2.heros.primary.render(data)}}

Examples

Edge to edge with topic

Dealing with
Sexual Harassment

For Individuals

For survivors, people who want to stand with them, and companies that want to get this right

Example data


      id: primary-hero1
topic: Dealing with<br/>Sexual Harassment
topicUrl: 'https://google.com'
subtopic: For Individuals
title: >-
  For survivors, people who want to stand with them, and companies that want to
  get this right
image:
  desktop: 'https://placeimg.com/1600/400/people'
  edgeToEdge: true

With Cta

This is the title

Go to google

Example data


      id: primary-hero2
title: This is the title
image:
  tablet: 'https://dummyimage.com/600x400/000/fff'
  desktop: 'https://dummyimage.com/600x400/000/fff'
  smallDesktop: 'https://dummyimage.com/600x400/000/fff'
  mobile: 'https://dummyimage.com/600x400/000/fff'
  fade: true
cta:
  url: 'https://google.com'
  text: Go to google
  campaign: test

Cta with topic and no fade

Topic

Subtopic

This is the title

Go to Lean In

Example data


      id: primary-hero3
title: This is the title
topic: Topic
topicUrl: 'http://leanin.org'
subtopic: Subtopic
image:
  tablet: 'https://dummyimage.com/600x400/000/fff'
  desktop: 'https://placeimg.com/1600/400/people'
  smallDesktop: 'https://dummyimage.com/600x400/000/fff'
  mobile: 'https://dummyimage.com/600x400/000/fff'
cta:
  url: 'http://leanin.org'
  text: Go to Lean In
  campaign: test

Mentorher


      {{modules2.mentorHer.flyout.render(data)}}

Example data


      text: some copy here
start: .kit-content

Hero

Usage


      {{modules2.mentorHer.hero.render(data)}}

Examples

Headline

Description headline

some other copy here

some copy here

cta text here

Example data


      headline: Headline
description:
  headline: Description headline
  copy: some other copy here
factoid:
  copy: some copy here
  cta:
    text: cta text here
    url: 'https://leanin.org'
cta:
  text: cta text
share:
  facebook: Share on facebook
  twitter: Share on twitter

Info

Usage


      {{modules2.mentorHer.info.render(data)}}

Examples

Basic

Why women get less

Women get less of the mentorship that opens doors, and women of color get far less. A big piece of this is driven by sexism, which is rooted in the fundamental belief that men are more capable than women. Some of it is rooted in people gravitating towards people who are like them – so men gravitate toward other men, and women miss out. Because most leaders are white men, women of color are even more likely to be overlooked. Concerns about spending time alone with women also prevent women from getting mentorship and building relationships with managers and leaders

Women are 24% less likely to receive career advice from senior leaders

62% of women of color say the lack of an influential mentor is a barrier to advancement

Example data


      headline: Why <span class='highlight'>women get less</span>
copy: >-
  Women get less of the mentorship that opens doors, and women of color get far
  less. A big piece of this is driven by sexism, which is rooted in the
  fundamental belief that men are more capable than women. Some of it is rooted
  in people gravitating towards people who are like them – so men gravitate
  toward other men, and women miss out. Because most leaders are white men,
  women of color are even more likely to be overlooked. Concerns about spending
  time alone with women also prevent women from getting mentorship and building
  relationships with managers and leaders
percents:
  - copy: Women are 24% less likely to receive career advice from senior leaders
    graphic: advice
  - copy: >-
      62% of women of color say the lack of an influential mentor is a barrier
      to advancement
    graphic: block

Oped

Usage


      {{modules2.mentorHer.opEd.render(data)}}

Examples

Basic

Op-Ed

“None of us should have to choose between the job we need and the family we love.”

A call to action By Sheryl Sandberg and Rachel Thomas

Read the article

Example data


      title: Op-Ed
quote: >-
  “None of us should have to choose between the job we need and the family we
  love.”
byline: A call to action By Sheryl Sandberg and Rachel Thomas
cta:
  text: Read the article
  isExternal: true
  url: 'https://google.com'

Socialbanner

Usage


      {{modules2.mentorHer.socialBanner.render(data)}}

Examples

Basic

Example data


      cta: 'I commit to #MentorHer'

Story

Usage


      {{modules2.mentorHer.story.render(data)}}

Examples

Basic

“Brian made sure that I knew the importance of being a good plumber and union member. He never treated me like others did—as ‘just a woman.’ He saw me as a person, as someone who wanted to learn the craft.”

—Judaline, plumber & founder of Lean In Women in Trades

“When Judaline tried to get into the union, at first they didn’t want to accept her. I spoke up for her because I knew the business manager at our local. I told him, ‘She’s a keeper. Don’t shut her out.’”

—Brian, plumber & welder

Example data


      left:
  image: 'https://media.pagedata.co/2018-02-03/1517619593346/Judaline.jpg'
  quote: >-
    “Brian made sure that I knew the importance of being a good plumber and
    union member. He never treated me like others did—as ‘just a woman.’ He saw
    me as a person, as someone who wanted to learn the craft.”
  byline: '—Judaline, plumber & founder of Lean In Women in Trades'
right:
  image: >-
    https://media.pagedata.co/2018-02-03/1517619590907/Judaline_mentor_cropped.jpg
  quote: >-
    “When Judaline tried to get into the union, at first they didn’t want to
    accept her. I spoke up for her because I knew the business manager at our
    local. I told him, ‘She’s a keeper. Don’t shut her out.’”
  byline: '—Brian, plumber & welder'

Tip

Usage


      {{modules2.mentorHer.tip.render(data)}}

Examples

Basic

Give women mentorship that opens doors

some copy here

Situation

Nullam id dolor

some copy here

Solution

Id nibh ultricies vehicula

some copy here

Did you know?

Mentorship and sponsorship are key drivers of success, but women get less of the high quality mentorship that accelerates careers. Women tend to get vague feedback on personal style––for instance, “the way you speak can be off-putting”––while men get actionable input, such as advice on which skills to develop. Women may be excluded from male-dominated events like sports games where valuable relationships are built. And women are less likely to have a sponsor—someone who advocates for their abilities, recommends them for promotions, and introduces them to influential people.

Button text

Example data


      headline:
  title: Give women mentorship that opens doors
  copy: some copy here
cta:
  text: Button text
  url: 'https://leanin.org'
didYouKnow:
  tag: Did you know?
  copy: >-
    Mentorship and sponsorship are key drivers of success, but women get less of
    the high quality mentorship that accelerates careers. Women tend to get
    vague feedback on personal style––for instance, “the way you speak can be
    off-putting”––while men get actionable input, such as advice on which skills
    to develop. Women may be excluded from male-dominated events like sports
    games where valuable relationships are built. And women are less likely to
    have a sponsor—someone who advocates for their abilities, recommends them
    for promotions, and introduces them to influential people.
items:
  - backgroundColor: bg-secondary
    situation:
      tag: Situation
      title: Nullam id dolor
      copy: some copy here
    solution:
      tag: Solution
      title: Id nibh ultricies vehicula
      copy: some copy here

Social


      {{modules2.social.floating.render(data)}}

Global text

It gets attached to page out of the kit

Example data


      globalNetworkText: Some global text
networks:
  - network: facebook
  - network: linkedin
  - network: twitter

Text per network

It gets attached to page out of the kit

Example data


      networks:
  - network: facebook
    text: Text for Facebook
  - network: linkedin
    text: Text for Linkedin
  - network: twitter
    text: Text for Twitter


      {{modules2.social.list.render(data)}}

Global text

Example data


      text: Some text as title
globalNetworkText: Some global text
networks:
  - network: facebook
  - network: linkedin
  - network: twitter

Text per network

Example data


      networks:
  - network: facebook
    text: Text for Facebook
  - network: linkedin
    text: Text for Linkedin
  - network: twitter
    text: Text for Twitter

Utils

Collection

Usage


      {{modules2.utils.collection.render(data)}}

Examples

Module: {"item":1}

Module: {"item":2}

Module: {"item":3}

Example data


      module: {}
data:
  - item: 1
  - item: 2
  - item: 3
container: true
wrapClass: collection-wrapper
itemClass: margin-bottom-md

Icons

Usage

              
<svg class="svg-icon" role="presentation" aria-hidden="true" width="25" height="40" viewBox="0 0 25 40"><use href="#facebook"></use></svg>

Examples

Styles

Examples

Lorem ipsum dolor sit amet

Dolor sit amet

Example data


        <h3 class="heading-1 overline">Lorem ipsum</h3>

        <h2 class="heading-2">Dolor sit <span class="highlight">amet</span></h2>

Clientkit

Colors

accent1 , link , button-primary-bg , primary , background-primary , text-color-primary
#dd3b33

accent1-lighter
color(#dd3b33 lightness(+20%))

accent1-darker
color(#dd3b33 blackness(+20%))

accent2 , link-hover
#b4221a

accent2-lighter
color(#b4221a lightness(+20%))

accent2-darker
color(#b4221a blackness(+20%))

body , input-label , charcoal , background-dark , text-color-body
#221e1f

heading , black , background-black , text-color-black
#000

white , body-light , background-default , input-background , button-primary-color , button-secondary-color , heading-light , background-white
#fff

background-alt
#5f5f5f

input-border , border
#ccc

input-border-focus
transparent

input-group-background
#f1f1f1

input-error , text-color-error
red

input-disabled
gray

button-secondary-bg , secondary , background-secondary
#0ea196

tooltip-bg
rgba(17,17,17,.9)

icons
#333

message-info
#f0f0f0

message-success
#dff0d8

message-error
#f2dede

tertiary
#453d95

quaternary
#f5a061

accent
#ebee00

detail
#afafaf

light , text-color-muted
#4A4A4A

light-gray-blue , background-light-gray-blue
#f7f9fa

footer-links
#818181

facebook
#4267b2

facebookHover
#365899

twitter
#1da1f2

twitterHover
#006dbf

linkedin
#0084bf

linkedinHover
#0073b1

background-lightgrey
#f8f8f8

background-light
#eeede0

text-color-inactive
#c1c1c1

notifications-disabled
#444

Fonts

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Large Font

Body Font

Small Font

Buttons

Links

Primary Link

Breakpoints


      desktop-wide-max-width: 100vw
      desktop-wide-min-width: 1240px
      desktop-wide-content: 1200px
      desktop-wide-col: xl
      desktop-wide-default: true
      desktop-wide-bleed: 1600px
      desktop-max-width: 1199px
      desktop-min-width: 1024px
      desktop-content: 1000px
      desktop-col: lg
      tablet-max-width: 1023px
      tablet-min-width: 768px
      tablet-content: 750px
      tablet-col: md
      mobile-max-width: 767px
      mobile-min-width: 320px
      mobile-content: 100%
      mobile-col: sm
      mobile-default: false

Spacing


      default-none: 0
      default-xl: 80px
      default-lg: 50px
      default-md: 30px
      default-sm: 20px
      default-xs: 10px
      mobile-xl: 40px
      mobile-lg: 30px
      mobile-md: 25px
      mobile-sm: 20px
      mobile-xs: 10px

Grid


      columns: 12
      gutters: 15px

Variables


      font-primary: "Lora", serif
      font-secondary: "Avenir", sans-serif
      font-heading: "Avenir", sans-serif
      font-weight-body: 400
      font-weight-light: 300
      font-weight-bold: 700
      font-size-body: 16px
      font-size-large: 20px
      font-size-small: 12px
      font-size-article: 18px
      font-size-smaller: 14px
      font-mobile-size-body: 16px
      font-mobile-size-large: 18px
      font-mobile-size-small: 12px
      font-mobile-size-article: 18px
      font-mobile-size-smaller: 14px
      font-quote: "Georgia", serif
      font-light: 300
      font-regular: 400
      font-semibold: 600
      font-bold: 700
      font-xbold: 800
      line-height: 1.4
      line-height-large: 1.5
      heading-line-height: 1.1
      heading-font-weight: 700
      heading-1-size: 50px
      heading-1-mobile-size: 30px
      heading-2-size: 30px
      heading-2-mobile-size: 25px
      heading-3-size: 25px
      heading-3-mobile-size: 22px
      heading-4-size: 20px
      heading-4-mobile-size: 18px
      heading-5-size: 16px
      heading-5-mobile-size: 16px
      heading-6-size: 14px
      heading-6-mobile-size: 12px
      table-cell-padding: 10px
      table-sm-cell-padding: 5px
      table-bg: transparent
      table-bg-accent: #f9f9f9
      table-bg-hover: #f5f5f5
      table-bg-active: #f5f5f5
      table-border-width: 1px
      table-border-color: #eceeef
      border-size: 1px
      border-radius-default: 1px
      border-radius-lg: 5px
      border-radius-sm: 2px
      button-radius-default: 0
      button-radius-lg: 0
      button-radius-sm: 0
      hr-max-width: 3.5em
      hr-height: 3px
      hr-color: #221e1f
      message-border-radius: 2px
      dropdown-bg: #fff
      easing-out: cubic-bezier(0.35, 0.97, 0.57, 0.99)
      easing-in-out: ease-in-out
      line-height-article: 1.85
      stretch-spacing: 2px

Config


{
  "tasks": {
    "analyze": "taskkit-analyze",
    "eslint": "taskkit-eslint",
    "clean": "taskkit-clean",
    "hash": "taskkit-hash",
    "scripts": "taskkit-rollup",
    "stylesheets": "clientkit-css",
    "styleguide": "clientkit-styleguide",
    "svgsprite": "taskkit-svg-sprite",
    "watcher": "taskkit-watcher",
    "default": [
      [
        "clean",
        "eslint"
      ],
      [
        "stylesheets",
        "scripts",
        "svgsprite",
        "styleguide"
      ]
    ],
    "dev": [
      "clean",
      "styleguide",
      "watcher"
    ],
    "prod": [
      "default",
      "hash",
      "styleguide"
    ]
  },
  "analyze": {
    "files": "/app/dist/*.+(js|css)"
  },
  "stylesheets": {
    "color": {
      "accent1": "#dd3b33",
      "accent1-lighter": "color(#dd3b33 lightness(+20%))",
      "accent1-darker": "color(#dd3b33 blackness(+20%))",
      "accent2": "#b4221a",
      "accent2-lighter": "color(#b4221a lightness(+20%))",
      "accent2-darker": "color(#b4221a blackness(+20%))",
      "body": "#221e1f",
      "heading": "#000",
      "white": "#fff",
      "body-light": "#fff",
      "background-default": "#fff",
      "background-alt": "#5f5f5f",
      "link": "#dd3b33",
      "link-hover": "#b4221a",
      "input-background": "#fff",
      "input-border": "#ccc",
      "input-border-focus": "transparent",
      "input-group-background": "#f1f1f1",
      "input-label": "#221e1f",
      "input-error": "red",
      "input-disabled": "gray",
      "button-primary-bg": "#dd3b33",
      "button-primary-color": "#fff",
      "button-secondary-bg": "#0ea196",
      "button-secondary-color": "#fff",
      "border": "#ccc",
      "tooltip-bg": "rgba(17,17,17,.9)",
      "icons": "#333",
      "message-info": "#f0f0f0",
      "message-success": "#dff0d8",
      "message-error": "#f2dede",
      "text-color-error": "red",
      "primary": "#dd3b33",
      "secondary": "#0ea196",
      "tertiary": "#453d95",
      "quaternary": "#f5a061",
      "accent": "#ebee00",
      "detail": "#afafaf",
      "charcoal": "#221e1f",
      "heading-light": "#fff",
      "light": "#4A4A4A",
      "black": "#000",
      "light-gray-blue": "#f7f9fa",
      "footer-links": "#818181",
      "facebook": "#4267b2",
      "facebookHover": "#365899",
      "twitter": "#1da1f2",
      "twitterHover": "#006dbf",
      "linkedin": "#0084bf",
      "linkedinHover": "#0073b1",
      "background-black": "#000",
      "background-lightgrey": "#f8f8f8",
      "background-light": "#eeede0",
      "background-dark": "#221e1f",
      "background-white": "#fff",
      "background-primary": "#dd3b33",
      "background-secondary": "#0ea196",
      "background-light-gray-blue": "#f7f9fa",
      "text-color-black": "#000",
      "text-color-primary": "#dd3b33",
      "text-color-body": "#221e1f",
      "text-color-muted": "#4A4A4A",
      "text-color-inactive": "#c1c1c1",
      "notifications-disabled": "#444"
    },
    "easing": {
      "linear": "cubic-bezier(0.250, 0.250, 0.750, 0.750)",
      "ease": "cubic-bezier(0.250, 0.100, 0.250, 1.000)",
      "ease-in": "cubic-bezier(0.420, 0.000, 1.000, 1.000)",
      "ease-out": "cubic-bezier(0.000, 0.000, 0.580, 1.000)",
      "ease-in-out": "cubic-bezier(0.420, 0.000, 0.580, 1.000)",
      "ease-in-quad": "cubic-bezier(0.550, 0.085, 0.680, 0.530)",
      "ease-in-cubic": "cubic-bezier(0.550, 0.055, 0.675, 0.190)",
      "ease-in-quart": "cubic-bezier(0.895, 0.030, 0.685, 0.220)",
      "ease-in-quint": "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
      "ease-in-sine": "cubic-bezier(0.470, 0.000, 0.745, 0.715)",
      "ease-in-expo": "cubic-bezier(0.950, 0.050, 0.795, 0.035)",
      "ease-in-circ": "cubic-bezier(0.600, 0.040, 0.980, 0.335)",
      "ease-in-back": "cubic-bezier(0.600, -0.280, 0.735, 0.045)",
      "ease-out-quad": "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
      "ease-out-cubic": "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
      "ease-out-quart": "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
      "ease-out-quint": "cubic-bezier(0.230, 1.000, 0.320, 1.000)",
      "ease-out-sine": "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
      "ease-out-expo": "cubic-bezier(0.190, 1.000, 0.220, 1.000)",
      "ease-out-circ": "cubic-bezier(0.075, 0.820, 0.165, 1.000)",
      "ease-out-back": "cubic-bezier(0.175, 0.885, 0.320, 1.275)",
      "ease-in-out-quad": "cubic-bezier(0.455, 0.030, 0.515, 0.955)",
      "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1.000)",
      "ease-in-out-quart": "cubic-bezier(0.770, 0.000, 0.175, 1.000)",
      "ease-in-out-quint": "cubic-bezier(0.860, 0.000, 0.070, 1.000)",
      "ease-in-out-sine": "cubic-bezier(0.445, 0.050, 0.550, 0.950)",
      "ease-in-out-expo": "cubic-bezier(1.000, 0.000, 0.000, 1.000)",
      "ease-in-out-circ": "cubic-bezier(0.785, 0.135, 0.150, 0.860)",
      "ease-in-out-back": "cubic-bezier(0.680, -0.550, 0.265, 1.550)"
    },
    "logColor": "green",
    "importPaths": [
      "/ck/styles"
    ],
    "mixinPath": "/ck/styles/mixins/*.css",
    "globalMixins": "/ck/styles/mixins",
    "assetPath": "/app/assets",
    "dist": "/app/dist",
    "minify": true,
    "mobileFirst": false,
    "breakpoints": {
      "desktop-wide": {
        "max-width": "100vw",
        "min-width": "1240px",
        "content": "1200px",
        "col": "xl",
        "default": true,
        "bleed": "1600px"
      },
      "desktop": {
        "max-width": "1199px",
        "min-width": "1024px",
        "content": "1000px",
        "col": "lg"
      },
      "tablet": {
        "max-width": "1023px",
        "min-width": "768px",
        "content": "750px",
        "col": "md"
      },
      "mobile": {
        "max-width": "767px",
        "min-width": "320px",
        "content": "100%",
        "col": "sm",
        "default": false
      }
    },
    "fontParsingWhitelist": "common",
    "autoprefixer": {
      "browsers": [
        "last 2 versions",
        "iOS 9"
      ]
    },
    "grid": {
      "columns": 12,
      "gutters": "15px"
    },
    "spacing": {
      "default": {
        "none": 0,
        "xl": "80px",
        "lg": "50px",
        "md": "30px",
        "sm": "20px",
        "xs": "10px"
      },
      "mobile": {
        "xl": "40px",
        "lg": "30px",
        "md": "25px",
        "sm": "20px",
        "xs": "10px"
      }
    },
    "vars": {
      "font": {
        "primary": "\"Lora\", serif",
        "secondary": "\"Avenir\", sans-serif",
        "heading": "\"Avenir\", sans-serif",
        "weight": {
          "body": 400,
          "light": 300,
          "bold": 700
        },
        "size": {
          "body": "16px",
          "large": "20px",
          "small": "12px",
          "article": "18px",
          "smaller": "14px"
        },
        "mobile-size": {
          "body": "16px",
          "large": "18px",
          "small": "12px",
          "article": "18px",
          "smaller": "14px"
        },
        "quote": "\"Georgia\", serif",
        "light": 300,
        "regular": 400,
        "semibold": 600,
        "bold": 700,
        "xbold": 800
      },
      "line-height": 1.4,
      "line-height-large": 1.5,
      "heading": {
        "line-height": 1.1,
        "font-weight": 700,
        "1-size": "50px",
        "1-mobile-size": "30px",
        "2-size": "30px",
        "2-mobile-size": "25px",
        "3-size": "25px",
        "3-mobile-size": "22px",
        "4-size": "20px",
        "4-mobile-size": "18px",
        "5-size": "16px",
        "5-mobile-size": "16px",
        "6-size": "14px",
        "6-mobile-size": "12px"
      },
      "table": {
        "cell-padding": "10px",
        "sm-cell-padding": "5px",
        "bg": "transparent",
        "bg-accent": "#f9f9f9",
        "bg-hover": "#f5f5f5",
        "bg-active": "#f5f5f5",
        "border-width": "1px",
        "border-color": "#eceeef"
      },
      "border": {
        "size": "1px",
        "radius": {
          "default": "1px",
          "lg": "5px",
          "sm": "2px"
        }
      },
      "button": {
        "radius": {
          "default": 0,
          "lg": 0,
          "sm": 0
        }
      },
      "hr": {
        "max-width": "3.5em",
        "height": "3px",
        "color": "#221e1f"
      },
      "message": {
        "border-radius": "2px"
      },
      "dropdown": {
        "bg": "#fff"
      },
      "easing": {
        "out": "cubic-bezier(0.35, 0.97, 0.57, 0.99)",
        "in-out": "ease-in-out"
      },
      "line-height-article": 1.85,
      "stretch-spacing": "2px"
    },
    "files": {
      "common.css": "/app/assets/common.css",
      "common2.css": "/app/assets/common2.css",
      "404.css": "/app/assets/pages/404/styles.css",
      "about.css": "/app/assets/pages/about/styles.css",
      "tips.css": "/app/assets/pages/tips/styles.css",
      "home.css": "/app/assets/pages/home/styles.css",
      "book.css": "/app/assets/pages/book/styles.css",
      "contact.css": "/app/assets/pages/contact/styles.css",
      "international.css": "/app/assets/pages/international/styles.css",
      "education.css": "/app/assets/pages/education/styles.css",
      "news-inspiration.css": "/app/assets/pages/news-inspiration/styles.css",
      "meeting-guides.css": "/app/assets/pages/meeting-guides/styles.css",
      "getty.css": "/app/assets/pages/getty/styles.css",
      "login.css": "/app/assets/pages/login/styles.css",
      "circles-guide.css": "/app/assets/pages/circles-guide/styles.css",
      "video-detail.css": "/app/assets/pages/education/video-detail/styles.css",
      "story-detail.css": "/app/assets/pages/stories/detail.css",
      "stories.css": "/app/assets/pages/stories/styles.css",
      "graduates.css": "/app/assets/pages/graduates/styles.css",
      "account.css": "/app/assets/pages/account/styles.css",
      "sexual-harassment.css": "/app/assets/pages/sexual-harassment/styles.css",
      "ypo.css": "/app/assets/pages/ypo/styles.css",
      "mentor-her.css": "/app/assets/pages/mentor-her/styles.css",
      "kit.css": "/app/assets/pages/kit/styles.css",
      "circles-toolkit.css": "/app/assets/pages/circles-toolkit/styles.css"
    }
  },
  "eslint": {
    "crashOnError": true,
    "ignore": [
      "node_modules",
      "/app/dist"
    ],
    "files": [
      "/app/assets/**/*.js"
    ]
  },
  "clean": {
    "files": {
      "all": "/app/dist"
    }
  },
  "hash": {
    "logColor": "yellow",
    "dist": "/app/dist",
    "files": {
      "css": "/app/dist/**/*.css",
      "js": "/app/dist/**/*.js",
      "svg": "/app/dist/**/*.svg"
    },
    "mappingFile": "assets.json"
  },
  "scripts": {
    "assetPath": "/app/assets",
    "dist": "/app/dist",
    "minify": true,
    "babel": {
      "exclude": [
        "node_modules/svg-injector/*"
      ]
    },
    "commonjs": {
      "enabled": true
    },
    "files": {
      "common.js": "/app/assets/common.js",
      "book.js": "/app/assets/pages/book/scripts.js",
      "international.js": "/app/assets/pages/international/scripts.js",
      "video-detail.js": "/app/assets/pages/education/video-detail/scripts.js",
      "education.js": "/app/assets/pages/education/scripts.js",
      "meeting-guides.js": "/app/assets/pages/meeting-guides/scripts.js",
      "getty.js": "/app/assets/pages/getty/scripts.js",
      "login.js": "/app/assets/pages/login/scripts.js",
      "home.js": "/app/assets/pages/home/scripts.js",
      "circles-guide.js": "/app/assets/pages/circles-guide/scripts.js",
      "welcome.js": "/app/assets/_modules/welcome/scripts.js",
      "search-circles.js": "/app/assets/pages/about/search-circles/scripts",
      "graduates.js": "/app/assets/pages/graduates/scripts.js",
      "account.js": "/app/assets/pages/account/scripts",
      "tips.js": "/app/assets/pages/tips/scripts.js",
      "kit.js": "/app/assets/pages/kit/scripts.js",
      "sexual-harassment.js": "/app/assets/pages/sexual-harassment/scripts.js",
      "mentor-her.js": "/app/assets/pages/mentor-her/scripts.js"
    }
  },
  "styleguide": {
    "output": "/app/dist/styleguide.html",
    "mapping": "/app/dist/assets.json",
    "css": []
  },
  "svgsprite": {
    "assetPath": "/app/assets",
    "dist": "/app/dist",
    "files": {
      "sprite.symbol.svg": [
        "/app/assets/icons/alert.svg",
        "/app/assets/icons/alert-color.svg",
        "/app/assets/icons/arrow-forward-thin.svg",
        "/app/assets/icons/arrow-forward.svg",
        "/app/assets/icons/book.svg",
        "/app/assets/icons/compass.svg",
        "/app/assets/icons/facebook.svg",
        "/app/assets/icons/group.svg",
        "/app/assets/icons/heart.svg",
        "/app/assets/icons/help.svg",
        "/app/assets/icons/linkedin.svg",
        "/app/assets/icons/full-arrow.svg",
        "/app/assets/icons/list.svg",
        "/app/assets/icons/papers.svg",
        "/app/assets/icons/plus.svg",
        "/app/assets/icons/share.svg",
        "/app/assets/icons/star.svg",
        "/app/assets/icons/twitter.svg"
      ]
    }
  },
  "watcher": {
    "ignore": [
      "node_modules",
      ".git"
    ],
    "files": {
      "/app/assets/**/*.css": {
        "task": "stylesheets",
        "ignore": [
          "/app/dist"
        ]
      },
      "/app/assets/**/*.js": {
        "task": [
          "eslint",
          "scripts"
        ],
        "ignore": [
          "/app/dist"
        ]
      },
      "/app/assets/**/*.svg": {
        "task": [
          "svgsprite"
        ],
        "ignore": [
          "/app/dist"
        ]
      },
      "/app/clientkit/*.yaml": "default"
    },
    "delay": 500
  },
  "CKDIR": "/ck",
  "dist": "/app/dist",
  "assetPath": "/app/assets",
  "minify": true,
  "crashOnError": true,
  "env": "production"
}

Kit content

Cards

Content

Usage

Examples

Basic

Some title

Example data

No Byline

No byline

Example data

No copy

No copy

Example data

No image

No image

Example data

Small image

Small image

Example data

Resource

Usage

Examples

Basic

Some title

Example data

No type

Some title

Example data

Content

Announcementbar

Usage

Examples

Example data

Centeredheading

Usage

Examples

Basic

Some title

Example data

No Border

Some title

Example data

With CTA

Some title

Example data

Endnotes

Usage

Examples

Basic

Sources

Example data

Guides

Usage

Examples

External Link

Guide Title I

Example data

Internal Link

Guide Title II

Example data

Pullquote

Usage

Examples

With CTA

Example data

No CTA

Example data

Recirc

Usage

Examples

Basic

Get involved with Lean In

Join one of our Regional chapters

Create your own Circle

Get notified of new Circles in your area

Example data

Sectionheader

Usage

Examples