TAS 스타일 메뉴 - 리소스 및 도구 모듈

리소스 및 도구 모듈은 TAS 웹사이트의 여러 페이지에서 사용됩니다. 컬러 카드 형식의 하이퍼링크를 통해 추가 정보를 제공하는 훌륭한 방법입니다. 많은 구성 옵션이 있으며 옵션은 카드에 대해 선택한 항목 유형에 따라 다릅니다. 이 모듈은 다음 두 가지를 제외하고 제품 카드와 유사합니다.

요소 오른쪽에 추가 카드가 넘치고, 탐색 화살표를 사용하여 오른쪽/왼쪽으로 스크롤하여 볼 수 있습니다.
세 가지 크기의 카드를 사용할 수 있으며 각각 고유한 옵션이 있습니다.

Large, Medium, Small 크기 유형에는 Medium 및 Small의 경우 "일러스트" 필드가 생략되고 Small의 경우 "Body copy" 필드가 생략된다는 점을 제외하면 동일한 옵션이 있습니다. "CTA 화살표 버튼" 필드는 Small size 유형에서는 그냥 "CTA 화살표"라고 부르지만 필드는 다른 유형과 동일합니다.

사용 가능한 옵션 :

제목 – 모듈 상단에 H2 제목("섹션 제목" 클래스 포함)으로 포함할 텍스트입니다.
```
본문
```
항목 - 기본적으로 모듈을 추가하면 하나의 항목이 생성됩니다. 이는 후속 섹션에 설명된 기본 설정으로 생성됩니다. 항목의 "유형"에 따라 옵션이 결정됩니다. 유형은 아래와 같습니다. 각 유형에 대해 해당 유형에 대한 옵션을 식별하기 위한 추가 섹션이 아래에 표시됩니다.
```
대형 | 중간 사이즈 | 작은 사이즈
```

큰 사이즈

테마 – 배경색이 어둡거나 밝은지 여부(텍스트는 반대가 되며 색상 옵션이 변경됩니다).
```
어둠 | 빛
```

색상 – 위에서 선택한 테마에 따라 제시된 옵션이 변경됩니다.
어두운:

숯 슬레이트 | 슬레이트 그레이 | 그레이 | 밝은 녹색 | 스틸 블루 | 청록 | 제비꽃

라이트 :

하늘색 청록색 | 클라우드 | 세이지 | 라일락 꽃

아이콘 – 이 카드를 구별하기 위해 부제목 옆에 아이콘을 배치할 수 있습니다.
```
미디어
```
부제 – 아이콘 바로 옆에 H5 요소로 표시되는 더 작은 텍스트입니다. 이는 생략할 수도 있고 카드의 용도를 명확히 하는 데 사용될 수도 있습니다.
```
본문
```
제목 – 카드의 주요 제목으로, 목적을 간결하게 나타내야 합니다.
```
텍스트(여러 줄)
```
본문 문구 – 여러 줄의 텍스트를 사용하면 이 카드를 클릭하면 사용자가 어디로 이동하는지 더 명확하게 알 수 있습니다.
```
오픈 텍스트
```
CTA 화살표 버튼 – 카드를 클릭하면 사용자가 이동하는 위치입니다. 큰 크기에서는 오른쪽에 애니메이션 화살표가 있는 "버블 버튼"으로 표시됩니다.
```
URL 및 링크 텍스트
```
일러스트 – 카드에 표시할 이미지를 선택합니다. 대표적으로 일러스트 이미지를 사용합니다.
```
미디어
```

큰 크기 항목은 두 개의 중간 크기 항목과 가로 크기가 동일합니다. 그림에서는 항목 추가 여부에 관계없이 추가 가로 공간을 사용합니다.

중간 사이즈

테마 – 배경색이 어둡거나 밝은지 여부(텍스트는 반대가 되며 색상 옵션이 변경됩니다).
```
어둠 | 빛
```

색상 – 위에서 선택한 테마에 따라 제시된 옵션이 변경됩니다.
어두운:

숯 슬레이트 | 슬레이트 그레이 | 그레이 | 밝은 녹색 | 스틸 블루 | 청록 | 제비꽃

라이트 :

하늘색 청록색 | 클라우드 | 세이지 | 라일락 꽃

아이콘 – 이 카드를 구별하기 위해 부제목 옆에 아이콘을 배치할 수 있습니다.
```
미디어
```
부제 – 아이콘 바로 옆에 H5 요소로 표시되는 더 작은 텍스트입니다. 이는 생략할 수도 있고 카드의 용도를 명확히 하는 데 사용될 수도 있습니다.
```
본문
```
제목 – 카드의 주요 제목으로, 목적을 간결하게 나타내야 합니다.
```
텍스트(여러 줄)
```
본문 문구 – 여러 줄의 텍스트를 사용하면 이 카드를 클릭하면 사용자가 어디로 이동하는지 더 명확하게 알 수 있습니다.
```
오픈 텍스트
```
CTA 화살표 버튼 – 카드를 클릭하면 사용자가 이동하는 위치입니다. 중간 크기에서는 오른쪽에 애니메이션 화살표가 있는 "버블 버튼"으로 표시됩니다.
```
URL 및 링크 텍스트
```

중간 크기 항목은 두 개의 작은 크기 항목과 수직 크기가 동일하다는 점에 유의하십시오. 아래 설명(소형 크기 설명)에 따라 추가된 경우 작은 크기 항목은 중간 항목 옆에만 "쌓여"집니다.

작은 크기

테마 – 배경색이 어둡거나 밝은지 여부(텍스트는 반대가 되며 색상 옵션이 변경됩니다).
```
어둠 | 빛
```

색상 – 위에서 선택한 테마에 따라 제시된 옵션이 변경됩니다.
어두운:

숯 슬레이트 | 슬레이트 그레이 | 그레이 | 밝은 녹색 | 스틸 블루 | 청록 | 제비꽃

라이트 :

하늘색 청록색 | 클라우드 | 세이지 | 라일락 꽃

아이콘 – 이 카드를 구별하기 위해 부제목 옆에 아이콘을 배치할 수 있습니다.
```
미디어
```
부제 – 아이콘 바로 옆에 H5 요소로 표시되는 더 작은 텍스트입니다. 이는 생략할 수도 있고 카드의 용도를 명확히 하는 데 사용될 수도 있습니다.
```
본문
```
제목 – 카드의 주요 제목으로, 목적을 간결하게 나타내야 합니다.
```
텍스트(여러 줄)
```
CTA 화살표 – 카드를 클릭하면 사용자가 이동하는 곳입니다. 작은 크기에서는 오른쪽에 애니메이션 화살표가 표시됩니다('거품 버튼' 없음).
```
URL 및 링크 텍스트
```

작은 항목을 생성한 후 항목 섹션에는 "작은 항목 추가"("항목 추가" 버튼과 대조)라는 추가 버튼이 있습니다. 해당 섹션 내에 추가 "소형 항목"을 생성할 수 있습니다.

새 항목이 추가되고 해당 유형이 "소형"으로 설정된 경우 마지막 항목의 오른쪽에 추가됩니다. 그것도 "소형"이라 할지라도 말이죠. 그러나 작은 항목 섹션 내부에 있는 이 버튼을 사용하여 새로운 "작은 항목"을 추가하는 경우; 두 개는 서로 옆에 쌓이고 중간 크기 항목과 같이 누적하여 동일한 수직 공간을 차지합니다.

다음은 다양한 옵션 중 일부가 선택된 모듈의 예이며, 해당 옵션이 어떻게 나타나는지 보여줍니다.

예제 리소스 및 도구 모듈

부제목 필드

제목 필드

본문 문구 필드

아무데도 연결하지 않음

제목 필드

본문 필드

아무데도 연결하지 않음

Title

아무데도 연결하지 않음