600 West

Heading 

<!-- Default -->
<header class=" " style="">
    A Better Way to Manage Your Social Messages
</header>


<!-- Default -->
<h1 class=" " style="max-width: 44rem;">
    Social Media Management Tools to Power Communication
</h1>


<!-- H 2 -->
<h2 class=" " style="">
    A Better Way to Manage Your Social Messages
</h2>


<!-- H 3 -->
<h3 class=" " style="">
    A Single-Stream Inbox
</h3>


<!-- H 4 -->
<h4 class=" " style="">
    Wahl Professional
</h4>


<!-- Centered -->
<header class="_centered " style="">
    A Better Way to Manage Your Social Messages
</header>


<!-- Small -->
<header class="_small " style="">
    A Better Way to Manage Your Social Messages
</header>


<!-- Large -->
<header class="_large " style="">
    A Better Way to Manage Your Social Messages
</header>


<!-- Overline -->
<header class="_overline " style="">
    A Better Way to Manage Your Social Messages
</header>


{{#if level}}
<h{{level}}
{{else}}
<header
{{/if}}
    class="{{modifier}} {{class}}"
    style="{{style}}"
>
    {{{text}}}
{{#if level}}
</h{{level}}>
{{else}}
</header>
{{/if}}
 
/* Default */
{
  "class": null,
  "level": null,
  "style": null,
  "text": "A Better Way to Manage Your Social Messages"
}


/* Default */
{
  "class": null,
  "level": 1,
  "style": "max-width: 44rem;",
  "text": "Social Media Management Tools to Power Communication"
}


/* H 2 */
{
  "class": null,
  "level": 2,
  "style": null,
  "text": "A Better Way to Manage Your Social Messages"
}


/* H 3 */
{
  "class": null,
  "level": 3,
  "style": null,
  "text": "A Single-Stream Inbox"
}


/* H 4 */
{
  "class": null,
  "level": 4,
  "style": null,
  "text": "Wahl Professional"
}


/* Centered */
{
  "class": null,
  "level": null,
  "style": null,
  "text": "A Better Way to Manage Your Social Messages",
  "modifier": "_centered"
}


/* Small */
{
  "class": null,
  "level": null,
  "style": null,
  "text": "A Better Way to Manage Your Social Messages",
  "modifier": "_small"
}


/* Large */
{
  "class": null,
  "level": null,
  "style": null,
  "text": "A Better Way to Manage Your Social Messages",
  "modifier": "_large"
}


/* Overline */
{
  "class": null,
  "level": null,
  "style": null,
  "text": "A Better Way to Manage Your Social Messages",
  "modifier": "_overline"
}
  • Content: 
    const React = require('react');
const cx = require('classnames');

const Heading = ({level, modifier, style, text}) => {
    return React.createElement(`h${level}`, {
        className: cx([modifier]) || null
    }, text);
};

module.exports = Heading;
  • URL: /components/raw/heading/Heading.jsx
  • Filesystem Path: components/atoms/Heading/Heading.jsx
  • Size: 253 Bytes
  • Content: 
    @import "../../Axioms";
h1 {
    @include h1;
    &._small {
        @include font-size-head-small;
    }
}
h2 {
    @include h2;
    &._small {
        @include font-size-subhead;
    }
    &._smaller {
        @include font-size-lead;
    }
    &._large {
        @include font-size-head-small;
    }
    &._centered {
        margin-right: auto;
        margin-left: auto;
    }
    &._overline {
        @include font-weight-semibold;
        @include overline;
    }
}
h3 {
    @include h3;
}
h4 {
    @include h4;
}
h5 {
    @include h5;
}
h6 {
    @include h6;
}
.subtitle {
    @include font-size-fine;
    @include font-weight-normal;
    display: block;
    text-transform: none;
    letter-spacing: normal;
}
  • URL: /components/raw/heading/Heading.scss
  • Filesystem Path: components/atoms/Heading/Heading.scss
  • Size: 720 Bytes

There are no notes for this item.