标注

标注以前称为面板，可用于创建侧边栏面板或在电子邮件中突出显示重要内容。

基础知识

标注添加了边框、背景和一些填充。标注使用完整的表格结构，外部 <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 大师班自适应电子邮件

电子邮件基础

想要更多？

联系我们

保持更新

基础知识

着色类

Sass 参考

变量

ZURB 大师班 自适应电子邮件

电子邮件基础

想要更多？

联系我们

保持更新

ZURB 大师班自适应电子邮件