標註

標註以前稱為面板，可用於建立側邊欄面板或在電子郵件中標出重要內容。

基礎

標註會新增一個框線、背景和一些內距。標註使用完整的表格結構，外層 <table> 使用類別 .callout（用於底部邊距），而最內層的 <th> 則套用 .callout-inner。

使用 Inky HTML 時，<callout> 標籤會為您建立這個結構。您可以將它們包覆在列或欄內。

HTML

<row>
  <columns small="6">
    <p>Not in a callout :(</p>
  </columns>
  <columns small="6">
    <callout class="secondary">
      <p>I'm in a callout!</p>
    </callout>
  </columns>
</row>

<callout class="primary">
  <row>
    <columns small="12">
      <p>This whole row is in a callout!</p>
    </columns>
  </row>
</callout>

<html>

<head></head>

<body>
  <table class="row">
    <tbody>
      <tr>
        <th class="small-6 large-6 columns first">
          <table>
            <tbody>
              <tr>
                <th>
                  <p>Not in a callout :(</p>
                </th>
              </tr>
            </tbody>
          </table>
        </th>
        <th class="small-6 large-6 columns last">
          <table>
            <tbody>
              <tr>
                <th>
                  <table class="callout">
                    <tbody>
                      <tr>
                        <th class="callout-inner secondary">
                          <p>I&apos;m in a callout!</p>
                        </th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>
        </th>
      </tr>
    </tbody>
  </table>&zwj;

  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner primary">
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p>This whole row is in a callout!</p>
                        </th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

色彩類別

標註的顏色可以透過新增類別 .primary、.success、.warning 或 .alert 至元素來變更。沒有色彩類別的標註將會有白色背景。

HTML

<callout>
  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>
<callout class="primary">
  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>

<callout class="success">
  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>

<callout class="warning">
  <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>

<callout class="alert">
  <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>

<html>

<head></head>

<body>
  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner">
          <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>
  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner primary">
          <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>

  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner success">
          <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>

  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner warning">
          <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>

  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner alert">
          <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

Sass 參考

變數

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

名稱	類型	預設值	說明
`$callout-background`	顏色	`$white`	註解的背景顏色。
`$callout-background-fade`	數字	`85%`	註解背景的淡出值。
`$callout-padding`	長度	`10px`	註解內的內距。
`$callout-margin-bottom`	長度	`$global-margin`	註解的下邊距。
`$callout-border`	邊框	`1px solid darken($callout-background, 20%)`	註解周圍的邊框。
`$callout-border-primary`	邊框	`1px solid darken($primary-color, 20%)`	具有 `.primary` 類別的註解周圍的邊框。
`$callout-border-secondary`	邊框	`1px solid darken($secondary-color, 20%)`	具有 `.secondary` 類別的註解周圍的邊框。
`$callout-border-success`	邊框	`1px solid darken($success-color, 20%)`	具有 `.success` 類別的註解周圍的邊框。
`$callout-border-warning`	邊框	`1px solid darken($warning-color, 20%)`	具有 `.warning` 類別的註解周圍的邊框。
`$callout-border-alert`	邊框	`1px solid darken($alert-color, 20%)`	具有 `.alert` 類別的註解周圍的邊框。

標註

基礎

色彩類別

Sass 參考

變數

ZURB MASTER CLASS 響應式電子郵件

電子郵件基礎

想要更多嗎？

與我們交談

保持最新資訊