en   미국 공식 홈페이지 정부
인기 검색어:

TAS 스타일 메뉴 – 제품 카드 모듈

제품 카드 모듈은 일반적으로 랜딩 페이지나 관련 리소스에 대한 링크를 제공하는 도움말 보기 페이지에서만 사용됩니다. 아이콘과 호버 아이콘은 필수 필드는 아니지만, 해당 필드가 없으면 카드가 "올바르게 보이지" 않습니다. 아이콘은 차콜 슬레이트(#383B53) 스트로크 색상이어야 하며 호버 아이콘은 동일하지만 흰색(#FFFFFF) 스트로크 색상을 사용해야 합니다. 둘 다 채우기 없이 투명해야 합니다.

제품 카드용 PHP가 작성되는 방식에 유의하는 것이 중요합니다. 카드를 추가한 후 링크를 ​​추가하지 않으면 페이지에 심각한 오류가 발생합니다. 페이지가 로드되고 일부 콘텐츠가 표시되는 동안 HTML DOM에서 링크가 추가되는 지점에서는 심각한 오류 메시지가 표시됩니다.


사용 가능한 옵션 :

  • 제목 – 모듈 상단에 H2 제목("섹션 제목" 클래스 포함)으로 포함할 텍스트입니다.
    본문
    
  • 본문 문구 – 선택적 제목과 스타일이 포함된 일반 단락 수준 텍스트입니다. 제품 카드 위, 헤드라인 바로 아래에 표시되는 모듈의 주요 콘텐츠입니다. 이는 제품 카드의 내용을 전체적으로 설명하는 소개 텍스트로 볼 수 있습니다.
    오픈 텍스트
  • 아이콘 - 다른 카드와 구별하기 위해 카드의 왼쪽 상단에 표시되는 아이콘입니다. Charcoal Slate 스트로크(#383B53), 채우기 없음, 투명한 배경을 갖춘 간단한 아이콘이어야 합니다.
    미디어
  • 호버 아이콘 – 사용자 커서 위에 카드를 올려 놓으면 카드가 차콜 슬레이트 색상으로 채워질 때 카드의 왼쪽 상단에 표시되는 아이콘입니다. 이러한 이유로 아이콘과 동일해야 하지만 흰색 획(#FFFFFF)이 있고 채우기가 없으며 배경이 투명해야 합니다.
    미디어
  • 제목 – 카드에 링크된 내용을 식별하는 굵은 텍스트를 카드에 생성하는 한 줄의 텍스트 필드입니다.
    본문
  • 텍스트 – 약간 긴 텍스트로, 일반 글꼴로 표시되어 카드의 나머지 부분을 채웁니다.
    텍스트(여러 줄)
  • 링크 – 표시 텍스트와 URL로 생성된 링크이며 오른쪽에 애니메이션 화살표가 표시됩니다. 전체 카드는 클릭 가능한 요소가 되지만 이 필드는 링크 대상을 결정합니다.
    URL 및 링크 텍스트

다음은 권장/일반 설정이 포함된 모듈의 예입니다. 이 모듈 유형에는 중요한 구성이 필요하지 않습니다. 단, 카드 전체가 클릭 가능한 요소가 되기 때문에 링크를 추가해야 합니다(필수 항목으로 표시되지 않음).


제품 카드 모듈

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare laoreet mi. Donec maximus fermentum conballis. 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.