TAS Style Menu – Content with illustration module

The Content with illustration module is used to provide more visual content on the TAS website.

It is the primary means of delivering HTML content to the user. There are many options to add spacing, adjust the layout, and present content in various ways. The most basic presentation is heading text with regular paragraphs. Sometimes blockquotes are used to make content stand out.

Inside the Copy Module is the ability to present content in columns or boxes as well. Each of those are demonstrated in the examples below.

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).

Headline text here

Image of two people talking with a laptop on a desk.

Title text here

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.