热门搜索词:

TAS 风格菜单 – 文章

以下是用于展示所提供模块及其样式选项的惯例示例。之后,将展示特定模块及其选项,供在设计要发布的文章时选择。每个模块选项描述之后,是该模块使用默认/典型配置的示例。

页面级设置包括:

  • 隐藏页脚列表 – 隐藏底部三个元素,标题为“我们是您的代言人”。这通常不会在文章页面上显示(隐藏),只会在获取帮助和通知页面上显示。此功能在此页面上已打开(隐藏),但可以在 这页.
  • 特色图片 – 用于包含聚合内容列表的图片,例如主页上的新闻区块或其他登录页面。图形通常是标题图像的不同变体(分辨率/尺寸)。

还有其他资源可用:

 


模块名称

可用选项:

  • 选项名称——选项的描述及其呈现方式
    选择、必需参数或内容类型

1. 标题模块

可用选项:

  • 隐藏面包屑 – 不显示导航栏下方的文本,其中包含指向每个级别的链接,例如主页 > {文章类型} > {文章名称 – 未链接}
    是 | 不
  • 背景颜色 - 包括背景颜色 #F7F6F4(“白烟”)
    是 | 不
  • 内容 – 灵活的 HTML 正文内容。这应包括标题的 H1 标题,以及可选的副标题的 H2 标题。字体大小选项可在 https://www.taxpayeradvocate.irs.gov/text-styles/
    开放文本
  • 图像对齐 - 正常显示,文本在左侧,图像在右侧,7/5 分割(12 列布局)。居中显示,文本在上,图像在下,每行堆叠成完整的 12 列。
    正常 | 底部中央
  • 图片 - 需要有关尺寸/分辨率的文字。如果不使用图像,则忽略图像对齐,并且文本以全宽(12 列)布局显示。
  • CTA 链接 – 链接到其他地方的按钮(默认为青色 #50ACB1 背景和白色 #FFFFFF 文本)。按钮还在按钮最右侧显示一个白色箭头,在 :hover 时会稍微移动。
    URL 和显示文本
  • 显示发布日期——显示文章的发布日期
    是 | 不
  • 显示日期——显示文章修改/重新发布的日期
    是 | 不

下面是具有推荐/典型设置的模块示例(面包屑 = 是,背景 = 否, 示例标题和文本、图像类型 = 正常、选择占位符图像、CTA 链接到谷歌、显示发布日期 = 是、显示日期 = 是)。

出版日期:   | 最后更新:3 年 2024 月 XNUMX 日

标题模块示例

Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aenean molestie sagittis sem 坐 amet 发酵。 Nullam tortor nulla,fringilla vitae feugiat eu,elementum vitae dui。

Google


2. 复制模块

可用选项:

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

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

正文栏

这是正文(对齐设置为全宽),而不是正文列。这完全灵活,可以显示任何 HTML 内容。它是所有文章的默认内容“容器”。列和框(如下所示)是可选的替代方案,但应成对呈现,以保持视觉平衡。

Etiam diam metus,pulvinar id leo vehicula,egestas actor nulla。现在在我的司令官生活中。暂停效力。 Donec eu metus condimentum,condimentum dui id,ultricies mi。菜豆 (Phasellus mollistincidunt nisl non ullamcorper)。 Donec vulputate non magna ut pellentesque。

列标题

Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aenean molestie sagittis sem 坐 amet 发酵。 Nullam tortor nulla,fringilla vitae feugiat eu,elementum vitae dui。 Proin nec tempor odio。 Quisque finibus ullamcorper tempus。 Vivamus blandit enim dolor, vitae egestas ipsummalesuada pharetra。 Proin eu semper eros。 Etiam quis Massa bibendum,mattis lectus id,blandit ipsum。 Etiam ac venenatis ex, ut commodo totortor. Morbi vel Egestas dolor。 Aenean blandit sem arcu,sed euismod nunc hendrerit sat amet。 Donec nec imperdiet lorem。

列标题 2

Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Aenean molestie sagittis sem 坐 amet 发酵。 Nullam tortor nulla,fringilla vitae feugiat eu,elementum vitae dui。 Proin nec tempor odio。 Quisque finibus ullamcorper tempus。 Vivamus blandit enim dolor, vitae egestas ipsummalesuada pharetra。 Proin eu semper eros。 Etiam quis Massa bibendum,mattis lectus id,blandit ipsum。 Etiam ac venenatis ex, ut commodo totortor. Morbi vel Egestas dolor。 Aenean blandit sem arcu,sed euismod nunc hendrerit sat amet。 Donec nec imperdiet lorem。