Menu ng Estilo ng TAS – Mga Artikulo

Nasa ibaba ang isang halimbawa ng convention na ginamit upang ipakita ang mga module na inaalok, at ang kanilang mga pagpipilian sa estilo. Pagkatapos nito, ang mga partikular na module at ang kanilang mga pagpipilian ay iniharap para sa pagpili sa pagdidisenyo ng isang artikulo para sa paglalathala. Pagkatapos ng bawat paglalarawan ng opsyon sa module, ay isang halimbawa ng module na iyon gamit ang mga default/karaniwang configuration.

Kasama sa mga setting ng page-level ang:

Itago ang listahan ng footer – Itago ang tatlong elemento sa ibaba, na may pamagat na “Kami ang Iyong Tagapagtanggol”. Ito ay karaniwang hindi ipinapakita (nakatago) sa mga pahina ng artikulo, at ipinapakita lamang sa mga pahina ng Kumuha ng Tulong at Abiso. Ang tampok ay naka-on (nakatago) sa pahinang ito, ngunit makikita sa ang pahinang ito.
Itinatampok na larawan – Ito ay ginagamit upang magsama ng larawan para sa pinagsama-samang listahan ng nilalaman, gaya ng News Block sa homepage, o iba pang mga landing page. Ang graphic ay karaniwang ibang variant (resolution/size) ng header image.

Available ang mga karagdagang mapagkukunan:

Pangalan ng modyul

Magagamit na Mga Pagpipilian:

Pangalan ng opsyon – paglalarawan ng opsyon at kung paano ito ipinapakita
```
mga pagpipilian, kinakailangang parameter, o uri ng nilalaman
```

1. Header module

Magagamit na Mga Pagpipilian:

Itago ang Breadcrumb – huwag ipakita ang teksto sa ibaba lamang ng navigation bar, na may mga link sa bawat antas, para sa Home > {Type of Article} > {article name – not linked}
```
Oo | Hindi
```
Kulay ng Background – isama ang kulay ng background ng #F7F6F4 (“White Smoke”)
```
Oo | Hindi
```
Nilalaman – Flexible na nilalaman ng katawan ng HTML. Dapat itong may kasamang H1 heading para sa pamagat, at opsyonal na H2 heading para sa isang subtitle. Ang mga opsyon para sa laki ng font ay matatagpuan sa https://www.taxpayeradvocate.irs.gov/text-styles/
```
opentext
```
Image align – Normal na nagpapakita ng text sa kaliwa, at larawan sa kanan, sa 7/5 split (12 collayout). Ang gitnang ibaba ay nagpapakita ng teksto sa itaas at larawan sa ibaba, na nakasalansan sa bawat isa sa isang buong 12 col row.
```
Normal | Gitnang ibaba
```
Larawan - kailangan ng text patungkol sa sizing/resolution. Kung walang ginamit na imahe, hindi papansinin ang Image align, at ang teksto ay ipapakita sa isang buong lapad (12 col) na layout.
CTA Link – Isang button na nagli-link sa ibang lugar (default sa Teal #50ACB1 background at White #FFFFFF text). Nagpapakita rin ang button ng puting arrow sa dulong kanan ng button, na bahagyang gumagalaw sa :hover.
```
URL at display na text
```
Ipakita ang petsa ng pag-publish – ipinapakita ang petsa kung kailan nai-publish ang artikulo
```
Oo | Hindi
```
Ipakita ang petsa – ipinapakita ang petsa kung kailan binago/na-publish muli ang artikulo
```
Oo | Hindi
```

Nasa ibaba ang isang halimbawa ng module na may mga inirerekomenda/karaniwang setting (Breadcrumb = Oo, Background = Hindi, halimbawa ng pamagat at teksto, Uri ng Imahe = Normal, Pinili ang larawan ng placeholder, CTA link sa google, Ipakita ang petsa ng pag-publish = Oo, Ipakita ang petsa = Oo).

Nai-publish: Mayo 2, 2024 | Huling Na-update: Mayo 3, 2024

Halimbawa ng Header Module

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie sagittis sem sit amet fermentum. Nullam tortor nulla, fringilla vitae feugiat eu, elementum vitae dui.

Google

2. Kopyahin ang modyul

Magagamit na Mga Pagpipilian:

Vertical margin – Magsama ng mas marami/normal/mas kaunting espasyo bago at/o pagkatapos ng module.
itaas at ibaba | Nangungunang | Ibaba | Wala | Negatibo sa itaas at ibaba | Nangungunang negatibo | Negatibo sa ibaba
Headline – Tekstong isasama bilang H2 heading (na may klase ng “section-heading”) sa tuktok ng module.
```
teksto
```
Estilo ng headline – Estilo ng pagtatanghal para sa headline. Ang gitna ng linya ay naglalagay ng pahalang na linya sa tabi ng teksto ng heading, na nagpapalawak sa natitira sa lapad ng lalagyan. Ang normal ay pareho, walang pahalang na linya. Ginagawang mas maliit ng underline ang heading (26px kumpara sa 40px), at naglalagay ng linya sa ilalim, ang buong lapad ng container.
```
Gitnang linya | Normal | Salungguhit
```
Background texture – Nagdaragdag ng tuldok na “texture” sa itaas, ibaba, o pareho ng module. Kitang-kita ang pagkakalagay. (Karaniwang ginagamit lang ito para gumawa ng "mahirap" na break sa content, lampas sa kung ano ang ibibigay ng spacing o pahalang na linya).
```
Nangungunang | Ibaba | Itaas at Ibaba | Hindi pinagana
```
Kulay ng background – Itinatakda ang kulay ng background para sa module. Ang puti ay default, at hindi itinatakda ang kulay ng background (pinapayagan ang kulay ng parent container na #FFFFFF na ipakita). Itinatakda ng White Smoke ang kulay ng background sa #F7F6F4, at nagdaragdag ng padding sa itaas at ibaba ng 20px (na kung ano ang mayroon ito bilang default). Ang Alice blue at Platinum blue ay parehong nagdaragdag ng padding sa itaas at ibaba ng 80px. Itinatakda ni Alice blue ang background sa #EDF7F7. Itinatakda ng Platinum blue ang background sa #E1E8EC.
```
Alice blue | Puting Usok | Puti | Platinum blue
```
Body copy align – Itinatakda ang alignment ng text ng body copy. Itinatakda ng Kaliwa ang max-width sa container sa 650px. Ang buong lapad ay sumasaklaw sa lapad ng elemento ng lalagyan na may teksto. Ini-align sa gitna ang lalagyan sa gitna ng lalagyan ng magulang, ngunit ang teksto ay naiwan pa rin na makatwiran.
```
Kaliwa | Gitna | Buong lapad
```
Body copy – Normal na teksto sa antas ng talata, na may opsyonal na mga heading at estilo. Pangunahing nilalaman ng modyul.
```
opentext
```
Kulay ng background – (ito ay nasa loob ng pangunahing seksyon ng Body copy). Hindi nagtatakda ng kulay ng background ang Transparent para sa seksyon ng body copy. Ang Sky teal at Alice blue ay parehong nagbubukas ng karagdagang pagpipilian ng "Buong lapad" o "Kahon." Ang buong lapad ay sumasaklaw sa kulay ng background sa buong lapad ng pahina. Ang kahon ay sumasaklaw lamang sa lapad ng lalagyan. Itinatakda ng Sky teal ang background sa #E1E8EC. Itinatakda ni Alice blue ang background sa #EDF7F7.
```
Sky teal | Alice blue | Transparent
```
Body Copy Column – Ang button na ito ay nagbibigay-daan sa paggawa ng mga sub-section ng content, na may sariling headline, at column ng content. Ang bawat isa ay nagtatanghal sa isang lalagyan na kalahati ng lapad ng magulang. Nagiging available ang isang karagdagang checkbox sa ibaba ng seksyong Body Copy Column, na kinilala bilang "Background blue".
- Headline – Ito ay isang linya ng text field, na nagpapakita ng nilalaman sa isang H3 header.
```
teksto
```
- Body copy – Ito ay isang opentext field na nagpapakita ng content sa a elemento. Parehong ipinapakita ang Headline at Body copy nang magkasama.
```
opentext
```
- Background blue – Lumilitaw ito nang isang beses, kung may isa o higit pang mga seksyon ng column ng Body copy na idinagdag, at nalalapat sa LAHAT. Ito ay isang checkbox na lalabas sa IBABA ng mga seksyon ng column na Body copy na idinagdag. Ang pagsuri nito ay nagtatakda ng kulay ng background ng container para sa lahat ng column sa #EDF7F7.
```
Oo | Hindi
```
Boxed Copy – Ang button na ito ay nagbibigay-daan sa paglikha ng mga sub-section ng content, na may sariling headline, at isang kahon sa paligid ng content. Ang bawat isa ay nagpapakita na parang bahagyang nakataas na card (na may back-shading), kalahati ng lapad ng magulang.
- Headline – Ito ay isang linya ng text field, na nagpapakita ng nilalaman sa isang H3 header.
```
teksto
```
- Body copy – Ito ay isang opentext field na nagpapakita ng content sa a elemento. Parehong ipinapakita ang Headline at Body copy sa "card".
```
opentext
```

Nasa ibaba ang isang halimbawa ng module na may mga inirerekomenda/karaniwang setting (Vertical Margin = "Itaas at ibaba", halimbawa ng pamagat at teksto, Headline style = Normal, Background texture = Disabled, Background color = White, halimbawa ng heading at text para sa body copy main, Kulay ng background (Body copy main) = Transparent, halimbawa ng heading at text para sa Body copy column – beses 2 para sa demonstration).

Column ng Body Copy

Ito ang body copy (align set to full width), hindi ang body copy column. Ito ay ganap na nababaluktot at maaaring magpakita ng anumang nilalamang HTML. Ito ang default na "lalagyan" ng nilalaman para sa lahat ng mga artikulo. Ang mga column at kahon (ipinapakita sa ibaba) ay mga opsyonal na alternatibo, ngunit dapat ipakita nang magkapares, para sa visual na balanse.

Etiam diam metus, pulvinar id leo vehicula, egestas auctor nulla. Praesent rhoncus at mi vitae commodo. Suspendisse potenti. Donec eu metus condimentum, condimentum dui id, ultricies mi. Phasellus mollis tincidunt nisl non ullamcorper. Donec vulputate non magna ut pellentesque.

Headline ng column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie sagittis sem sit amet fermentum. Nullam tortor nulla, fringilla vitae feugiat eu, elementum vitae dui. Proin nec tempor odio. Quisque finibus ullamcorper tempus. Vivamus blandit enim dolor, vitae egestas ipsum malesuada pharetra. Proin eu semper eros. Etiam quis massa bibendum, mattis lectus id, blandit ipsum. Etiam ac venenatis ex, ut commodo tortor. Morbi vel egestas dolor. Aenean blandit sem arcu, sed euismod nunc hendrerit sit amet. Donec nec imperdiet lorem.

Pangalan ng modyul

1. Header module

2. Kopyahin ang modyul

Column ng Body Copy

Headline ng column

Headline ng column 2