Menu ng Estilo ng TAS – Module ng Mga Product Card

The Product Card module is generally only used on landing pages, or on Get Help pages to link to related resources. While the icon and Hover icon are not required fields, the card will not “look right” without them. The Icon should be a Charcoal Slate (#383B53) stroke color, and the Hover icon should be identical, but with a White (#FFFFFF) stroke color. Both should be transparent with no fill.

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
```

Below is an example of the module with the recommended/typical settings. There are not significant configurations necessary for this module type. However, because the entire card becomes the clickable element, a Link must be added (it is not marked as a required 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.