排版

Foundation for Emails 中的排版旨在讓您的生活更輕鬆，為所有最基本的排版元素提供乾淨、美觀、簡單的預設樣式。

段落

這是一個段落。段落預設字體大小、行高和間距，以符合整體垂直節奏。要顯示段落的外觀，需要多一點內容—所以，您知道雌性大王魷魚平均體型是潛在配偶的兩倍（且長約 10 英尺）嗎？很酷吧。使用 <strong> 和 <em> 標籤表示應顯示或強調朗讀的文字。瀏覽器會將其加粗和斜體，而螢幕閱讀器會強調朗讀這些字詞。

<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>

Foundation 包含所有標題的樣式。

HTML

<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>

<html>

<head></head>

<body>
  <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>
</body>

</html>

示範

標題大小

此架構包含兩個排版比例—一個使用窄範圍大小，適用於小型和中型螢幕，另一個使用較寬範圍大小，適用於大型螢幕。您可以編輯專案設定檔中的 $hx-font-size 變數，來變更這些比例，或為其他斷點新增新比例。

標題	預設
`<h1>`	34px
`<h2>`	30px
`<h3>`	28px
`<h4>`	24px
`<h5>`	20px
`<h6>`	18px

小型標題區塊

透過在標題中插入 <small> 元素，Foundation 會縮小標題字型大小以作為內嵌元素，讓你可用於副標題或其他次要標題文字。

HTML

<h3>Foundation for Emails <small>Version 2</small></h3>

<html>

<head></head>

<body>
  <h3>Foundation for Emails <small>Version 2</small></h3>
</body>

</html>

示範

連結

連結非常標準，而且顏色預設為 Foundation 主要顏色。深入了解 Foundation 的全域顏色。

<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>

分隔線

使用分隔線來定義段落或電子郵件區塊之間的主題中斷。

<h-line></h-line>

Sass 參考

變數

這個元件的預設樣式可以使用專案的設定檔中的這些 Sass 變數進行自訂。

名稱	類型	預設值	說明
`$global-font-color`	顏色	`$black`	全域字型顏色。
`$body-font-family`	字型	`Helvetica, Arial, sans-serif`	全域字型系列。
`$global-font-weight`	關鍵字	`normal`	全域字型粗細。
`$header-color`	顏色	`inherit`	標題顏色
`$global-line-height`	數字	`130%`	全域行高。
`$global-font-size`	數字	`16px`	內文文字的字型大小。
`$body-line-height`	數字	`$global-line-height`	內文文字的行高。
`$header-font-family`	清單	`$body-font-family`	標題的字型系列。
`$header-font-weight`	清單	`$global-font-weight`	標題的字型系列。
`$h1-font-size`	數字	`floor($global-font-size * 2.125)`	`<h1>` 元素的字型大小。
`$h2-font-size`	數字	`floor($global-font-size * 1.875)`	`<h2>` 元素的字型大小。
`$h3-font-size`	數字	`floor($global-font-size * 1.75)`	`<h3>` 元素的字型大小。
`$h4-font-size`	數字	`floor($global-font-size * 1.5)`	`<h4>` 元素的字型大小。
`$h5-font-size`	數字	`floor($global-font-size * 1.2)`	`<h5>` 元素的字型大小。
`$h6-font-size`	數字	`floor($global-font-size * 1.125)`	`<h6>` 元素的字型大小。
`$header-margin-bottom`	數字	`10px`	`<h1>` 到 `<h6>` 元素的邊距底部。
`$paragraph-margin-bottom`	數字	`10px`	段落的邊距底部。
`$small-font-size`	數字	`80%`	`<small>` 的預設字型大小。
`$small-font-color`	顏色	`$medium-gray`	將 `<small>` 元素置於標題內時，其顏色。
`$lead-font-size`	數字	`$global-font-size * 1.25`	引言段落的字型大小。
`$lead-line-height`	數字	`160%`	引言段落的行高。
`$text-padding`	數字	`10px`	段落內的內距。
`$subheader-lineheight`	數字	`1.4`	子標題的預設行高。
`$subheader-color`	顏色	`$dark-gray`	子標題的預設字型顏色。
`$subheader-font-weight`	字串	`$global-font-weight`	子標題的預設字重。
`$subheader-margin-top`	數字	`4px`	子標題的預設上邊界。
`$subheader-margin-bottom`	數字	`8px`	子標題的預設下邊界。
`$hr-width`	數字	`$global-width`	分隔線的最大寬度。
`$hr-border`	清單	`1px solid $black`	分隔線的預設邊框。
`$hr-margin`	數字或清單	`20px`	分隔線的預設邊界。
`$hr-align`	字串	`center`	分隔線的預設對齊方式。
`$anchor-text-decoration`	關鍵字	`none`	錨點的文字裝飾。
`$anchor-color`	顏色	`$primary-color`	錨點的文字顏色。
`$anchor-color-visited`	顏色	`$anchor-color`	已造訪連結的錨點文字顏色。
`$anchor-color-hover`	顏色	`darken($primary-color, 10%)`	滑鼠移至錨點上的文字顏色。
`$anchor-color-active`	顏色	`$anchor-color-hover`	目前錨點的文字顏色。
`$stat-font-size`	數字	`40px`	統計數字的預設字型大小。
`$remove-ios-blue`	布林值	`true`	移除 iOS 電話與地址樣式

Mixins

我們使用這些 mixins 來建立此元件的最終 CSS 輸出。您可以自行使用 mixins，從我們的元件中建立自己的類別結構。

h-line

@include h-line($align, $width, $border, $margin);

建立分隔線/水平線。

參數	類型	預設值	說明
`$align`	字串	`無`	左、中、右
`$width`	字串	`無`	分隔線寬度
`$border`	字串	`無`	分隔線的簡寫邊框樣式
`$margin`	字串	`無`	分隔線上下方的邊界

排版

段落

標題

標題大小

小型標題區塊

連結

分隔線

Sass 參考

變數

Mixins

h-line

ZURB 大師班回應式電子郵件

電子郵件基礎

想要更多嗎？

與我們聯繫

保持最新資訊

段落

標題

標題大小

小型標題區塊

連結

分隔線

Sass 參考

變數

Mixins

h-line

ZURB 大師班 回應式電子郵件

電子郵件基礎

想要更多嗎？

與我們聯繫

保持最新資訊

ZURB 大師班回應式電子郵件