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

TAS 風格選單 – 插圖模組的內容

插圖內容模組用於在 TAS 網站上提供更多視覺內容。

 

它是向使用者交付 HTML 內容的主要方式。有許多選項可以添加間距、調整佈局以及以各種方式呈現內容。最基本的演示是帶有常規段落的標題文字。有時會使用區塊引號來使內容脫穎而出。

複製模組內部也能夠在列或框中呈現內容。下面的範例中對其中的每一個進行了演示。


可用選項:

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