TAS Style Menu – Articles

Below is an example of the convention used to present the modules offered, and their styling options. After that, specific modules and their options are presented for selection in designing an article for publishing. After each module option description, is an example of that module using default/typical configurations.

Page-level settings include:

Hide footer listing – Hide the bottom three elements, with the heading “We’re Your Advocate”. This is typically not shown (hidden) on article pages, and only shown on Get Help and Notice pages. The feature is turned on (hidden) on this page, but can be seen on this page.
Featured image – This is used to include an image for aggregate content listings, such as the News Block on the homepage, or other landing pages. The graphic is typically a different variant (resolution/size) of the header image.

Additional resources are available:

Name of the module

Available options:

Option name – description of the option and how it presents
```
choices, required parameters, or type of content
```

1. Header module

Available options:

Hide Breadcrumb – do not display the text just below the navigation bar, with links to each level, for Home > {Type of Article} > {article name – not linked}
```
Yes | No
```
Background Color – include background color of #F7F6F4 (“White Smoke”)
```
Yes | No
```
Content – Flexible HTML body content. This should include an H1 heading for the title, and optionally an H2 heading for a subtitle. Options for font sizing can be found on https://www.taxpayeradvocate.irs.gov/text-styles/
```
opentext
```
Image align – Normal presents with text to the left, and image to the right, in a 7/5 split (12 col layout). Center bottom presents with text above and image below, stacked with each in a full 12 col row.
```
Normal | Center bottom
```
Image – need text regarding sizing/resolution. If no image is used, Image align is ignored, and the text is presented in a full-width (12 col) layout.
CTA Link – A button linking elsewhere (defaults to Teal #50ACB1 background and White #FFFFFF text). The button also displays a white arrow to the far-right of the button, which moves slightly upon :hover.
```
URL & display text
```
Show published date – displaying the date the article was published
```
Yes | No
```
Show date – displaying the date the article was modified/republished
```
Yes | No
```

Below is an example of the module with the recommended/typical settings (Breadcrumb = Yes, Background = No, example heading and text, Image Type = Normal, Placeholder image selected, CTA link to google, Show published date = Yes, Show date = Yes).

Published: May 2, 2024 | Last Updated: May 3, 2024

Header Module Example

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. Copy module

Available options:

Vertical margin – Include more/normal/less space before and/or after the module.
Top and bottom | Top | Bottom | None | Top and bottom negative | Top negative | Bottom negative
Headline – Text to include as an H2 heading (with a class of “section-heading”) at the top of the module.
```
text
```
Headline style – Presentation style for the headline. Line center inserts a horizontal line next to the heading text, extending the remainder of the container width. Normal is the same, without a horizontal line. Underline makes the heading smaller (26px versus 40px), and inserts a line underneath, the full width of the container.
```
Line center | Normal | Underline
```
Background texture – Adds a dotted “texture” to the top, bottom, or both of the module. Placement is obvious. (This is normally only used to create a “hard” break in content, beyond what spacing or a horizontal line will convey).
```
Top | Bottom | Top and Bottom | Disabled
```
Background color – Sets the background color for the module. White is default, and does not set the background color (allowing the parent container’s color of #FFFFFF to display). White Smoke sets the background color to #F7F6F4, and adds padding to the top and bottom of 20px (which is what it has by default). Alice blue and Platinum blue both add padding to the top and bottom of 80px. Alice blue sets the background to #EDF7F7. Platinum blue sets the background to #E1E8EC.
```
Alice blue | White Smoke | White | Platinum blue
```
Body copy align – Sets alignment of the body copy text. Left sets the max-width to the container to 650px. Full width spans the width of the container element with text. Center aligns the container <div> to the center of the parent container, but the text is still left-justified.
```
Left | Center | Full width
```
Body copy – Normal paragraph-level text, with optional headings and styling. Main content of the module.
```
opentext
```
Background color – (this is inside the Body copy main section). Transparent does not set a background color for the body copy section. Sky teal and Alice blue both open an additional choice of “Full width” or “Box”. Full width spans the background color the entire page width. Box spans only the container width. Sky teal sets the background to #E1E8EC. Alice blue sets the background to #EDF7F7.
```
Sky teal | Alice blue | Transparent
```
Body Copy Column – This button allows creation sub-sections of content, with their own headline, and column of content. Each presents in a container half of the width of the parent. An additional checkbox becomes available below the Body Copy Column section, identified as “Background blue”.
- Headline – This is a single line text field, that displays content in a H3 header.
```
text
```
- Body copy – This is an opentext field that displays content in a <div> element. Both the Headline and Body copy display together.
```
opentext
```
- Background blue – This appears once, if there is one or more Body copy column sections added, and applies to ALL. It is a checkbox that appears BELOW the Body copy column sections added. Checking this sets the background color of the container for all columns to #EDF7F7.
```
Yes | No
```
Boxed Copy – This button allows creation sub-sections of content, with their own headline, and a box around the content. Each presents like slightly raised card (with back-shading), half of the width of the parent.
- Headline – This is a single line text field, that displays content in a H3 header.
```
text
```
- Body copy – This is an opentext field that displays content in a <div> element. Both the Headline and Body copy display together in the “card”.
```
opentext
```

Below is an example of the module with the recommended/typical settings (Vertical Margin = “Top and bottom”, example heading and text, Headline style = Normal, Background texture = Disabled, Background color = White, example heading and text for body copy main, Background color (Body copy main) = Transparent, example heading and text for Body copy column – times 2 for demonstration).

Body Copy Column

This is the body copy (align set to full width), not the body copy column. This is completely flexible and can display any HTML content. It is the default content “container” for all articles. Columns and boxes (demonstrated below) are optional alternatives, but should be presented in pairs, for visual balance.

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.

Column headline

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.

Name of the module

1. Header module

2. Copy module

Body Copy Column

Column headline

Column headline 2