Menu ng Estilo ng TAS – Module ng Mga Product Card

Karaniwang ginagamit lang ang module ng Product Card sa mga landing page, o sa mga page na Kumuha ng Tulong para mag-link sa mga nauugnay na mapagkukunan. Bagama't hindi kinakailangang mga field ang icon at icon ng Hover, hindi magiging "tama" ang card kung wala ang mga ito. Ang Icon ay dapat na isang Charcoal Slate (#383B53) na kulay ng stroke, at ang Hover icon ay dapat na magkapareho, ngunit may White (#FFFFFF) na kulay ng stroke. Parehong dapat na transparent na walang punan.

Mahalagang tandaan na ang paraan ng pagkakasulat ng PHP para sa Mga Product Card; sa sandaling naidagdag ang isang card, kung hindi idinagdag ang isang Link, magdudulot ito ng kritikal na error sa page. Habang maglo-load ang page, at magpapakita ng ilang nilalaman, sa punto sa HTML DOM kung kailan idaragdag ang link, ipapakita nito ang kritikal na mensahe ng error.

Magagamit na Mga Pagpipilian:

Headline – Tekstong isasama bilang H2 heading (na may klase ng “section-heading”) sa tuktok ng module.
```
teksto
```
Body copy – Normal na teksto sa antas ng talata, na may opsyonal na mga heading at estilo. Pangunahing nilalaman ng module, na ipinapakita sa itaas ng mga card ng produkto, sa ibaba lamang ng Headline. Maaari itong tingnan bilang panimulang teksto upang ilarawan kung ano ang matatagpuan sa mga card ng produkto sa kabuuan.
```
opentext
```
Icon – Ito ay isang icon na ipinapakita sa kaliwang sulok sa itaas ng card, upang makilala ito sa iba pang mga card. Dapat itong isang simpleng icon, na may Charcoal Slate stroke (#383B53), walang fill, at transparent na background.
```
media
```
Icon ng hover – Kapag na-hover ang card ng cursor ng user, ito ang icon na ipinapakita sa kaliwang sulok sa itaas ng card, kapag napuno ang card sa kulay ng Charcoal Slate. Para sa kadahilanang iyon, dapat itong magkapareho sa Icon, ngunit may White stroke (#FFFFFF), walang fill, at transparent na background.
```
media
```
Pamagat – Ito ay isang linya ng text field para gumawa ng naka-bold na text sa card na nagpapakilala kung saan naka-link ang card.
```
teksto
```
Teksto - Ito ay bahagyang mas mahabang teksto, na ipinapakita sa normal na font, na pinupuno ang natitirang bahagi ng card.
```
teksto (multiline)
```
Link – Ito ay isang link na ginawa gamit ang display text at URL, na ipinakita na may animated na arrow sa kanan. Ang buong card ay nagiging naki-click na elemento, gayunpaman tinutukoy ng field na ito ang target ng link.
```
URL at Teksto ng Link
```

Nasa ibaba ang isang halimbawa ng module na may mga inirerekomenda/karaniwang setting. Walang mahahalagang pagsasaayos na kinakailangan para sa uri ng module na ito. Gayunpaman, dahil ang buong card ay nagiging naki-click na elemento, kailangang magdagdag ng Link (hindi ito minarkahan bilang kinakailangang field).

Module ng Mga Product Card

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