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

TAS 風格選單 – 資源與工具模組

TAS 網站的許多頁面都使用資源和工具模組。這是透過彩色卡片格式的超連結提供附加資訊的絕佳方式。有許多配置選項,這些選項取決於為卡片選擇的項目類型。此模組與產品卡類似,但有兩個例外:

  1. 它將在元素右側溢出額外的卡片,並使用導航箭頭向右/向左滾動以查看它們。
  2. 它允許使用三種不同尺寸的卡片,每種尺寸都有自己的選項。

大號、中號和小號尺寸類型具有相同的選項,只是中號和小號省略了「插圖」字段,小號省略了「正文」字段。 “CTA 箭頭按鈕”欄位在小尺寸類型中簡稱為“CTA 箭頭”,但該欄位與其他類型相同。


可用選項:

  • 標題 – 作為 H2 標題(具有「節標題」類別)包含在模組頂部的文字。
    文本
  • 專案 – 預設情況下,新增模組時會建立一項。它是使用後續部分中概述的預設設定創建的。項目的「類型」決定了選項。類型如下圖所示。對於每種類型,下面顯示了附加部分,以確定該類型的選項。
    大尺寸|中號 |小型

大尺寸

  • 主題 – 背景顏色是深色還是淺色(文字將相反,並且顏色選項將發生變化)。
    黑暗|光
  • 顏色 - 顯示的選項會根據上面選擇的主題而變化。
    黑暗的:

    木炭板岩|板岩灰|灰色|淺綠色|鋼藍色|青色|紫色

    燈:

    天空青色|雲|鼠尾草|紫丁香
  • 圖標 – 可以在副標題旁邊放置一個圖標,以區分這張卡片。
    媒體
  • 副標題 – 較小的文本,顯示在 H5 元素中,位於圖示旁。這可以省略,也可以用來闡明該卡的用途。
    文本
  • 標題 - 這是卡片的主標題,應簡潔地表明其用途。
    文字(多行)
  • 正文 – 可以使用多行文字來進一步闡明點擊此卡將帶使用者前往何處。
    開放文本
  • CTA 箭頭按鈕 – 按一下卡片將引導使用者前往此處。在大尺寸中,它將顯示在“氣泡按鈕”中,右側有一個動畫箭頭。
    URL 和連結文本
  • 插圖 – 選擇要在卡片上顯示的圖像。通常,使用插圖圖像。
    媒體

請注意,大尺寸項目與兩個中尺寸項目的水平尺寸相同 - 插圖會佔用額外的水平空間,無論是否添加。

中等大小

  • 主題 – 背景顏色是深色還是淺色(文字將相反,並且顏色選項將發生變化)。
    黑暗|光
  • 顏色 - 顯示的選項會根據上面選擇的主題而變化。
    黑暗的:

    木炭板岩|板岩灰|灰色|淺綠色|鋼藍色|青色|紫色

    燈:

    天空青色|雲|鼠尾草|紫丁香
  • 圖標 – 可以在副標題旁邊放置一個圖標,以區分這張卡片。
    媒體
  • 副標題 – 較小的文本,顯示在 H5 元素中,位於圖示旁。這可以省略,也可以用來闡明該卡的用途。
    文本
  • 標題 - 這是卡片的主標題,應簡潔地表明其用途。
    文字(多行)
  • 正文 – 可以使用多行文字來進一步闡明點擊此卡將帶使用者前往何處。
    開放文本
  • CTA 箭頭按鈕 – 按一下卡片將引導使用者前往此處。在中等尺寸中,它將顯示在“氣泡按鈕”中,右側有一個動畫箭頭。
    URL 和連結文本

請注意,中型商品的垂直尺寸與兩個小尺寸商品的垂直尺寸相同 - 如果按如下所述(在小尺寸說明中)添加,小尺寸商品只會“堆疊”在中型商品旁邊。

小尺寸

  • 主題 – 背景顏色是深色還是淺色(文字將相反,並且顏色選項將發生變化)。
    黑暗|光
  • 顏色 - 顯示的選項會根據上面選擇的主題而變化。
    黑暗的:

    木炭板岩|板岩灰|灰色|淺綠色|鋼藍色|青色|紫色

    燈:

    天空青色|雲|鼠尾草|紫丁香
  • 圖標 – 可以在副標題旁邊放置一個圖標,以區分這張卡片。
    媒體
  • 副標題 – 較小的文本,顯示在 H5 元素中,位於圖示旁。這可以省略,也可以用來闡明該卡的用途。
    文本
  • 標題 - 這是卡片的主標題,應簡潔地表明其用途。
    文字(多行)
  • CTA 箭頭 – 點選卡片將引導使用者前往的位置。在小尺寸中,它將顯示一個向右的動畫箭頭(沒有“氣泡按鈕”)。
    URL 和連結文本

請注意,建立小專案後 - 在專案部分中有一個附加按鈕「新增小專案」(與「新增專案」按鈕相反);它允許在該部分內創建一個額外的“小項目”。

如果新增項目,其類型設為“小尺寸”,它將新增到最後一個項目的右側;即使那也是“小尺寸”。但是,如果使用“小項目”部分中的此按鈕新增新的“小項目”;兩者將並排堆疊,並累積佔用與中型物品相同的垂直空間。

下面是一個模組範例,其中選擇了一些不同的選項,以顯示它們的顯示方式。


範例資源和工具模組