en   美國官方網站 GOV
熱門搜尋字詞:

TAS 風格菜單 – 文章

以下是用於展示所提供的模組及其樣式選項的約定範例。之後,將提供特定的模組及其選項,供設計要發布的文章時選擇。在每個模組選項描述之後,是使用預設/典型配置的該模組的範例。

頁面級設定包括:

  • 隱藏頁尾清單 - 隱藏底部三個元素,標題為「我們是您的倡導者」。這通常不會顯示(隱藏)在文章頁面上,而僅顯示在「取得協助」和「通知」頁面上。該功能在此頁面上已開啟(隱藏),但可以在 這頁.
  • 特色圖像 – 用於包含聚合內容清單的圖像,例如主頁上的新聞區塊或其他登陸頁面。此圖形通常是標題圖像的不同變體(解析度/大小)。

也提供其他資源:

 


模組名稱

可用選項:

  • 選項名稱 – 選項的描述及其呈現方式
    選擇、所需參數或內容類型

1. 標頭模組

可用選項:

  • 隱藏麵包屑 - 不要在導航欄正下方顯示文本,並包含指向每個級別的鏈接,例如首頁 > {文章類型} > {文章名稱 - 未鏈接}
    是 | 不
  • 背景顏色 – 包含 #F7F6F4 的背景顏色(「白煙」)
    是 | 不
  • 內容 – 靈活的 HTML 正文內容。這應該包括標題的 H1 標題,以及副標題的可選 H2 標題。字體大小選項可以在 https://www.taxpayeradvocate.irs.gov/text-styles/
    開放文本
  • 影像對齊 – 正常顯示,文字在左,影像在右,按 7/5 分割(12 列佈局)。中心底部顯示上方的文字和下方的圖像,每個都堆疊在完整的 12 列行中。
    正常 |中心底部
  • 圖片 - 需要有關尺寸/解析度的文字。如果未使用圖像,則忽略圖像對齊,並且文字以全角(12 列)佈局呈現。
  • CTA 連結 – 連結到其他地方的按鈕(預設為青色 #50ACB1 背景和白色 #FFFFFF 文字)。該按鈕還在按鈕的最右側顯示一個白色箭頭,該箭頭在 :hover 時輕微移動。
    URL 和顯示文字
  • 顯示發表日期-顯示文章的發表日期
    是 | 不
  • 顯示日期 – 顯示文章修改/重新發布的日期
    是 | 不

以下是具有推薦/典型設定的模組範例(麵包屑 = 是,背景 = 否, 範例標題和文本,圖像類型 = 正常,選擇佔位符圖像,CTA 連結到 google,顯示發布日期 = 是,顯示日期 = 是)。

發布時間:   | 最後更新時間: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 標題(具有「節標題」類別)包含在模組頂部的文字。
    文本
  • 標題樣式 – 標題的呈現樣式。行中心在標題文字旁邊插入一條水平線,延伸容器寬度的其餘部分。法線是一樣的,沒有水平線。下劃線使標題變小(26 像素與 40 像素),並在下方插入一條線,即容器的整個寬度。
    線中心|正常 |強調
  • 背景紋理 - 將點狀「紋理」新增至模組的頂部、底部或兩者。擺放位置一目了然。 (這通常僅用於在內容中創建「硬」中斷,超出間距或水平線所能傳達的範圍)。
    頂部 |底部|頂部和底部|殘障人士
  • 背景顏色 – 設定模組的背景顏色。預設為白色,不設定背景顏色(允許顯示父容器的顏色#FFFFFF)。 White Smoke 將背景顏色設為 #F7F6F4,並在頂部和底部添加 20px 的內邊距(這是預設的內容)。愛麗絲藍和白金藍都在 80px 的頂部和底部添加了內邊距。愛麗絲藍色將背景設定為#EDF7F7。鉑藍色將背景設定為#E1E8EC。
    愛麗絲藍|白煙|白色|鉑藍
  • 內文對齊 – 設定正文文字的對齊方式。 Left 將容器的最大寬度設定為 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。