热门搜索词:

TAS 风格菜单 – 带有插图模块的内容

带有插图的内容模块用于在 TAS 网站上提供更多视觉内容。

 

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

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


可用选项:

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

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


此处为标题文字

两个人在桌上用笔记本电脑交谈的图像。

此处为标题文字

Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Nunc ornare laoreet mi。 Donec maximus 发酵 convallis。 Sed lorem nunc,tempor nec odio vitae,facilisis placerat lacus。 Maecenas venenatis gravida mauris,ut dictum eros suscipit vitae。 Pellentesque consectetur magna nec vulputate laoreet。 Aliquam urna purus,pellentesque id nunc bibendum,ultrices viverra metus。 Quisque quis auctor lectus, vel consectetur risus。