热门搜索词:

TAS 样式菜单 – 信息模块

TAS 网站的许多页面都使用了信息模块。

它是向用户传递 HTML 内容的主要方式。有许多选项可以添加间距、调整布局并以各种方式呈现内容。最基本的呈现方式是带有常规段落的标题文本。有时使用块引用来突出内容。

复制模块还能够以列或框的形式显示内容。以下示例演示了每种方式。


可用选项:

  • 垂直边距 - 包含模块之前和/或之后的更多/正常/更少的空间。
    顶部和底部 | 顶部 | 底部 | 无 | 顶部和底部负片 | 顶部负片 | 底部负片
  • 标题 – 作为 H2 标题(带有“section-heading”类)包含在模块顶部的文本。
    文本
  • 标题样式 – 标题的显示样式。行居中在标题文本旁边插入一条水平线,延伸容器宽度的剩余部分。正常与此相同,没有水平线。下划线使标题变小(26px 对 40px),并在下方插入一条线,即容器的整个宽度。
    线中心 | 正常 | 下划线
  • 背景纹理 – 在模块的顶部、底部或顶部添加点状“纹理”。位置很明显。(这通常仅用于在内容中创建“硬”中断,超出间距或水平线所传达的范围)。
    顶部 | 底部 | 顶部和底部 | 已禁用
  • 背景颜色 – 设置模块的背景颜色。白色为默认颜色,不设置背景颜色(允许显示父容器的颜色 #FFFFFF)。白色烟雾将背景颜色设置为 #F7F6F4,并在顶部和底部添加 20px 的填充(默认情况下如此)。爱丽丝蓝和铂金蓝都在顶部和底部添加了 80px 的填充。爱丽丝蓝将背景设置为 #EDF7F7。铂金蓝将背景设置为 #E1E8EC。
    爱丽丝蓝 | 烟白色 | 白色 | 铂金蓝
  • 正文对齐 - 设置正文文本的对齐方式。左侧将容器的最大宽度设置为 650px。全宽跨越带有文本的容器元素的宽度。居中对齐容器到父容器的中心,但文本仍然左对齐。
    左 | 中 | 全宽
  • 正文 – 普通段落级文本,带有可选标题和样式。模块的主要内容。
    开放文本
  • 背景颜色 - (位于正文主要部分内)。透明不会为正文部分设置背景颜色。天青色和爱丽丝蓝都提供了“全宽”或“方框”的附加选项。全宽将背景颜色扩展到整个页面宽度。方框仅跨越容器宽度。天青色将背景设置为 #E1E8EC。爱丽丝蓝将背景设置为 #EDF7F7。
    天青色 | 爱丽丝蓝 | 透明
  • 正文栏 – 此按钮允许创建内容子部分,这些子部分具有自己的标题和内容栏。每个子部分都显示在宽度为父部分一半的容器中。在正文栏部分下方会出现一个附加复选框,标记为“背景蓝色”。
    • 标题 – 这是一个单行文本字段,显示 H3 标题中的内容。
      文本
    • 正文 – 这是一个开放文本字段,以文本形式显示内容元素。标题和正文一起显示。
      开放文本
    • 背景蓝色 – 如果添加了一个或多个正文列部分,则会出现一次,并应用于所有部分。这是一个复选框,显示在添加的正文列部分下方。选中此选项会将所有列的容器背景颜色设置为 #EDF7F7。
      是 | 不
  • 盒装副本 – 此按钮允许创建内容的子部分,这些子部分具有自己的标题,内容周围有一个框。每个子部分都像略微凸起的卡片(带有背景阴影),宽度为父部分的一半。
    • 标题 – 这是一个单行文本字段,显示 H3 标题中的内容。
      文本
    • 正文 – 这是一个开放文本字段,以文本形式显示内容元素。标题和正文都一起显示在“卡片”中。
      开放文本

下面是具有推荐/典型设置的模块示例(垂直边距 = “顶部和底部”, 示例标题和文本, 标题样式 = 正常, 背景纹理 = 已禁用, 背景颜色 = 白色, 正文标题和正文示例,背景颜色(正文主体)=透明, 正文栏的示例标题和文本 – 乘以 2 以进行演示).