Type Styles 

<!-- Default -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Heading 01</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="heading01">The quick brown fox jumps over the lazy dog</div>
        </div>
    </div>
</div>

<!-- Heading 02 -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Heading 02</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="heading02">The quick brown fox jumps over the lazy dog</div>
        </div>
    </div>
</div>

<!-- Heading 03 -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Heading 03</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="heading03">The quick brown fox jumps over the lazy dog</div>
        </div>
    </div>
</div>

<!-- Heading 04 -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Heading 04</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="heading04">The quick brown fox jumps over the lazy dog</div>
        </div>
    </div>
</div>

<!-- Lead -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Lead</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. Vestibulum varius mattis mi sit amet viverra. Duis at pharetra nisl. Vivamus hendrerit luctus diam. Quisque ut lorem nibh. Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim. Curabitur a dui condimentum, ornare metus ut, pharetra massa.</div>
        </div>
    </div>
</div>

<!-- Quote -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Quote</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--quote">Go mbeidh an fórsa leat! — May the force be with you!</div>
        </div>
    </div>
</div>

<!-- Body -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Body</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. Vestibulum varius mattis mi sit amet viverra. Duis at pharetra nisl. Vivamus hendrerit luctus diam. Quisque ut lorem nibh. Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim. Curabitur a dui condimentum, ornare metus ut, pharetra massa.</div>
        </div>
    </div>
</div>

<!-- Caption -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Caption</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--caption">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

<!-- Card Title Large -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Card Title Large</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--large-card-title">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

<!-- Card Title Medium -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Card Title Medium</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--medium-card-title">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

<!-- Card Title Small -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Card Title Small</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--small-card-title">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

<!-- Card Description Large -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Card Description Large</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--large-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. </div>
        </div>
    </div>
</div>

<!-- Card Description Medium -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Card Description Medium</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--medium-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. </div>
        </div>
    </div>
</div>

<!-- Card Meta -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Card Meta</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--card-meta">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>
</div>

<!-- Proposition Text -->
<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">Proposition Text</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="p--proposition-text">If you&#x27;re planning on driving in Ireland, here&#x27;s what you need</div>
        </div>
    </div>
</div>

<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="col medium-2 sg-typography-cell">
            <div class="sg-typography-name">{{name}}</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="{{modifier}}">{{text}}</div>
        </div>
    </div>
</div>
 
/* Default */
{
  "name": "Heading 01",
  "modifier": "heading01",
  "text": "The quick brown fox jumps over the lazy dog"
}

/* Heading 02 */
{
  "name": "Heading 02",
  "modifier": "heading02",
  "text": "The quick brown fox jumps over the lazy dog"
}

/* Heading 03 */
{
  "name": "Heading 03",
  "modifier": "heading03",
  "text": "The quick brown fox jumps over the lazy dog"
}

/* Heading 04 */
{
  "name": "Heading 04",
  "modifier": "heading04",
  "text": "The quick brown fox jumps over the lazy dog"
}

/* Lead */
{
  "name": "Lead",
  "modifier": "p--lead",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. Vestibulum varius mattis mi sit amet viverra. Duis at pharetra nisl. Vivamus hendrerit luctus diam. Quisque ut lorem nibh. Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim. Curabitur a dui condimentum, ornare metus ut, pharetra massa."
}

/* Quote */
{
  "name": "Quote",
  "modifier": "p--quote",
  "text": "Go mbeidh an fórsa leat! — May the force be with you!"
}

/* Body */
{
  "name": "Body",
  "modifier": "p--body",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. Vestibulum varius mattis mi sit amet viverra. Duis at pharetra nisl. Vivamus hendrerit luctus diam. Quisque ut lorem nibh. Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim. Curabitur a dui condimentum, ornare metus ut, pharetra massa."
}

/* Caption */
{
  "name": "Caption",
  "modifier": "p--caption",
  "text": "Lorem ipsum dolor sit amet."
}

/* Card Title Large */
{
  "name": "Card Title Large",
  "modifier": "p--large-card-title",
  "text": "Lorem ipsum dolor sit amet."
}

/* Card Title Medium */
{
  "name": "Card Title Medium",
  "modifier": "p--medium-card-title",
  "text": "Lorem ipsum dolor sit amet."
}

/* Card Title Small */
{
  "name": "Card Title Small",
  "modifier": "p--small-card-title",
  "text": "Lorem ipsum dolor sit amet."
}

/* Card Description Large */
{
  "name": "Card Description Large",
  "modifier": "p--large-card-description",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. "
}

/* Card Description Medium */
{
  "name": "Card Description Medium",
  "modifier": "p--medium-card-description",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum. "
}

/* Card Meta */
{
  "name": "Card Meta",
  "modifier": "p--card-meta",
  "text": "Lorem ipsum dolor sit amet."
}

/* Proposition Text */
{
  "name": "Proposition Text",
  "modifier": "p--proposition-text",
  "text": "If you're planning on driving in Ireland, here's what you need"
}

There are no notes for this item.