TAS Style Menu – Resource & Tools Module

Ang Resource & Tools Module ay ginagamit sa maraming pahina ng website ng TAS. Ito ay isang mahusay na paraan upang magbigay ng karagdagang impormasyon sa pamamagitan ng hyperlink sa isang kulay na format ng card. Mayroong maraming mga pagpipilian sa pagsasaayos, at ang mga pagpipilian ay nakasalalay sa uri ng item na pinili para sa card. Ang module na ito ay katulad ng mga Product card, na may dalawang pagbubukod:

Aapaw nito ang mga karagdagang card sa kanan ng elemento, na may mga navigation arrow upang mag-scroll pakanan/kaliwa upang tingnan ang mga ito.
Pinapayagan nito ang tatlong magkakaibang laki ng mga card, bawat isa ay may sariling mga pagpipilian.

Ang mga uri ng Malaki, Katamtaman, at Maliit na laki ay may parehong mga opsyon, maliban sa Katamtaman at Maliit na alisin ang field na "Ilustrasyon", at ang Maliit ay inaalis ang field na "Body copy". Ang field na "CTA arrow button" ay tinatawag na "CTA arrow" sa uri ng Maliit na laki, gayunpaman ang field ay kapareho ng para sa iba pang mga uri.

Magagamit na Mga Pagpipilian:

Headline – Tekstong isasama bilang H2 heading (na may klase ng “section-heading”) sa tuktok ng module.
```
teksto
```
Mga Item – Bilang default, isang item ang nalilikha kapag idinagdag ang module. Ito ay nilikha gamit ang mga default na setting na nakabalangkas sa kasunod na mga seksyon. Ang "Uri" ng item ang tumutukoy sa mga opsyon. Ang mga uri ay ipinapakita sa ibaba. Para sa bawat uri, at ang karagdagang seksyon ay ipinapakita sa ibaba, upang matukoy ang mga opsyon para sa uri na iyon.
```
Malaking sukat | Katamtamang Laki | Maliit na sukat
```

Malaking sukat

Tema – Kung ang kulay ng background ay madilim o maliwanag (ang teksto ay magiging kabaligtaran, at ang mga pagpipilian para sa kulay ay magbabago).
```
Madilim | Liwanag
```

Kulay - Ang mga opsyon na ipinakita ay nagbabago, depende sa Tema na pinili sa itaas.
Madilim:

Charcoal Slate | Slate gray | Gray | Banayad na berde | Bakal na asul | Teal | Violet

Ilaw:

Sky teal | Ulap | Sage | Lilac

Iconography – Maaaring maglagay ng icon sa tabi ng subhead, upang makilala ang card na ito.
```
media
```
Subhead – Mas maliit na text, na ipinakita sa isang H5 na elemento, sa tabi mismo ng icon. Maaari itong alisin, o gamitin upang linawin kung para saan ang card.
```
teksto
```
Pamagat - Ito ang pangunahing pamagat ng card, at dapat na maigsi na tukuyin ang layunin nito.
```
teksto (multiline)
```
Body copy – maraming linya ng text ang maaaring gamitin para mas linawin kung saan dadalhin ng pag-click sa card na ito ang user.
```
opentext
```
CTA arrow button – Kung saan dadalhin ng pag-click sa card ang user. Sa malaking sukat, ipapakita ito sa isang "button ng bubble" na may animated na arrow sa kanan.
```
URL at Teksto ng Link
```
Ilustrasyon – Pumili ng imaheng ipapakita sa card. Karaniwan, ginagamit ang mga larawang ilustrasyon.
```
media
```

Tandaan na ang malalaking sukat ng mga item ay kapareho ng pahalang na laki ng dalawang Katamtamang laki ng mga item - ang paglalarawan ay gumagamit ng karagdagang pahalang na espasyo, idinagdag man ang isa o hindi.

Katamtamang laki

Tema – Kung ang kulay ng background ay madilim o maliwanag (ang teksto ay magiging kabaligtaran, at ang mga pagpipilian para sa kulay ay magbabago).
```
Madilim | Liwanag
```

Kulay - Ang mga opsyon na ipinakita ay nagbabago, depende sa Tema na pinili sa itaas.
Madilim:

Charcoal Slate | Slate gray | Gray | Banayad na berde | Bakal na asul | Teal | Violet

Ilaw:

Sky teal | Ulap | Sage | Lilac

Iconography – Maaaring maglagay ng icon sa tabi ng subhead, upang makilala ang card na ito.
```
media
```
Subhead – Mas maliit na text, na ipinakita sa isang H5 na elemento, sa tabi mismo ng icon. Maaari itong alisin, o gamitin upang linawin kung para saan ang card.
```
teksto
```
Pamagat - Ito ang pangunahing pamagat ng card, at dapat na maigsi na tukuyin ang layunin nito.
```
teksto (multiline)
```
Body copy – maraming linya ng text ang maaaring gamitin para mas linawin kung saan dadalhin ng pag-click sa card na ito ang user.
```
opentext
```
CTA arrow button – Kung saan dadalhin ng pag-click sa card ang user. Sa katamtamang laki, ipapakita ito sa isang “bubble button” na may animated na arrow sa kanan.
```
URL at Teksto ng Link
```

Tandaan na ang Katamtamang laki ng mga item ay kapareho ng patayong laki ng dalawang Maliit na laki ng mga item - Maliit na laki ng mga item ay "stack" lamang sa tabi ng isang Medium na item, kung idinagdag tulad ng inilarawan sa ibaba (sa paglalarawan ng Maliit na Sukat).

Maliit na sukat

Tema – Kung ang kulay ng background ay madilim o maliwanag (ang teksto ay magiging kabaligtaran, at ang mga pagpipilian para sa kulay ay magbabago).
```
Madilim | Liwanag
```

Kulay - Ang mga opsyon na ipinakita ay nagbabago, depende sa Tema na pinili sa itaas.
Madilim:

Charcoal Slate | Slate gray | Gray | Banayad na berde | Bakal na asul | Teal | Violet

Ilaw:

Sky teal | Ulap | Sage | Lilac

Iconography – Maaaring maglagay ng icon sa tabi ng subhead, upang makilala ang card na ito.
```
media
```
Subhead – Mas maliit na text, na ipinakita sa isang H5 na elemento, sa tabi mismo ng icon. Maaari itong alisin, o gamitin upang linawin kung para saan ang card.
```
teksto
```
Pamagat - Ito ang pangunahing pamagat ng card, at dapat na maigsi na tukuyin ang layunin nito.
```
teksto (multiline)
```
CTA arrow – Kung saan dadalhin ng pag-click sa card ang user. Sa maliit na sukat, ipapakita ito na may animated na arrow sa kanan (nang walang "bubble button").
```
URL at Teksto ng Link
```

Tandaan na pagkatapos gumawa ng Maliit na Item - sa loob ng seksyon ng Item ay may karagdagang button na "Magdagdag ng maliit na item" (sa kaibahan sa button na "Magdagdag ng item"); na nagbibigay-daan sa paglikha ng karagdagang "Maliit na Item" sa loob ng seksyong iyon.

Kung ang isang bagong Item ay idinagdag, at ang uri nito ay nakatakda sa "Maliit na sukat", ito ay idaragdag sa kanan ng huling item; kahit “Small size” din ang isang iyon. Gayunpaman, kung may idinagdag na bagong "maliit na item" gamit ang button na ito sa loob ng seksyong Maliit na Item; ang dalawa ay isalansan sa tabi ng isa't isa, at kukuha ng parehong patayong espasyo nang pinagsama-sama, bilang ang Medium size na item.

Nasa ibaba ang isang halimbawa ng modyul na may ilan sa iba't ibang opsyon na pinili, upang ipakita kung paano lumilitaw ang mga ito.

Halimbawang Resource at Tools Module

Subhead na field

Patlang ng pamagat

field ng body copy

Link sa wala

Patlang ng pamagat

Larangan ng katawan

Link sa wala

Pamagat

Link sa wala