Paragraphs
This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the <strong>
and <em>
tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize them, while screen readers will read the words with emphasis.
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the `<strong>` and `<em>` tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> them, while screen readers will read the words with <em>emphasis</em>.</p>
Header
Foundation includes styles for all headings.
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>
DEMO
Header Sizes
The framework includes two typographic scales—one uses a narrow range of sizes for small- and medium-sized screens, and the other uses a wider range of sizes for large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the $hx-font-size
variables in your project's Settings File.
Header | Default | |
---|---|---|
<h1> |
34px | |
<h2> |
30px | |
<h3> |
28px | |
<h4> |
24px | |
<h5> |
20px | |
<h6> |
18px |
Small Header Segments
By inserting a <small>
element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.
<h3>Foundation for Emails <small>Version 2</small></h3>
<h3>Foundation for Emails <small>Version 2</small></h3>
DEMO
Links
Links are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.
<p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>
Dividers
Use dividers to define thematic breaks between paragraphs or sections of your email.
<hr/>
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
Name | Type | Default Value | Description |
---|---|---|---|
$global-font-color |
Color | $black |
Global font color. |
$body-font-family |
Font | Helvetica, Arial, sans-serif |
Global font family. |
$global-font-weight |
Keyword | normal |
Global font weight. |
$header-color |
Color | inherit |
Header color |
$global-line-height |
Number | 1.3 |
Global line height. |
$global-font-size |
Number | 16px |
Font size of body text. |
$body-line-height |
Number | $global-line-height |
Line height of body text. |
$header-font-family |
List | $body-font-family |
Font family of headings. |
$header-font-weight |
List | $global-font-weight |
Font family of headings. |
$h1-font-size |
Number | 34px |
Font size of |
$h2-font-size |
Number | 30px |
Font size of |
$h3-font-size |
Number | 28px |
Font size of |
$h4-font-size |
Number | 24px |
Font size of |
$h5-font-size |
Number | 20px |
Font size of |
$h6-font-size |
Number | 18px |
Font size of |
$header-margin-bottom |
Number | 10px |
Margin bottom of |
$paragraph-margin-bottom |
Number | 10px |
Margin bottom of paragraphs. |
$small-font-size |
Number | 80% |
Default font size for |
$small-font-color |
Color | $medium-gray |
Color of |
$lead-font-size |
Number | $global-font-size * 1.25 |
Font size of lead paragraphs. |
$lead-line-height |
Number | 1.6 |
Line height of lead paragraphs. |
$text-padding |
Number | 10px |
Padding inside paragraphs. |
$subheader-lineheight |
Number | 1.4 |
Default line height for subheaders. |
$subheader-color |
Color | $dark-gray |
Default font color for subheaders. |
$subheader-font-weight |
String | $global-font-weight |
Default font weight for subheaders. |
$subheader-margin-top |
Number | 4px |
Default top margin for subhheaders. |
$subheader-margin-bottom |
Number | 8px |
Default bottom margin for subheaders. |
$hr-width |
Number | $global-width |
Maximum width of a divider. |
$hr-border |
List | 1px solid $black |
Default border for a divider. |
$hr-margin |
Number or List | 20px auto |
Default margin for a divider. |
$anchor-text-decoration |
Keyword | none |
Text decoration for anchors. |
$anchor-color |
Color | $primary-color |
Text color of anchors. |
$anchor-color-visited |
Color | $anchor-color |
Text color of anchors to visited links. |
$anchor-color-hover |
Color | darken($primary-color, 10%) |
Text color of anchors on hover. |
$anchor-color-active |
Color | $anchor-color-hover |
Text color of active anchors. |
$stat-font-size |
Number | 40px |
Default font size for statistic numbers. |