The article rendering is a unique presentation option for article content. While it often appears as a lone element on a page aside from major navigational components, it can be used in conjunction with other surrounding renderings as well.

What's Included In This Rendering?

Component overview



A: Title


The title introduces the article and utilizes a heading style (link opens in new window) appropriate for its level of placement within the page.

H1 headline style

H2 headline style

H3 headline style

H4 headline style

B: Subtitle


A subtitle may be added to supplement the title. It should use a subheading (link opens in new window) style that complements the title’s heading style.

S1 subheadline style

C: Social sharing


The social sharing bar allows users to quickly share articles via a number of social media outlets and relays the number of times a given article has been shared. View standard icon styles (link opens in new window) for more information on visual presentation.

We use Facebook, LinkedIn, Google+, Twitter and Email as social sharing channels. For each channel, there is:

  • A button when tapped/clicked, opens a dialog to share the article
  • A counter that displays the number of times being shared on that social channel.

D: Body copy


This component contains the majority of the article’s content. For the most part, it will adhere to standard body copy (link opens in new window) styling, but internal headings and subheadings (link opens in new window) of levels appropriately subordinate to the title may be included as well.

Body copy lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

  • Et dolore magna aliqua
  • Ut enim ad minim veniam, quis nostrud
  • Exercitation cullamco laboris

E: Article image


This optional image helps convey the main idea of the article. If it is omitted, the text of the article reflows to fill the area it would have occupied. For assistance with picking an appropriate image, visit the photography (link opens in new window) standards page.

F: Testimonial


The pull quote can be used to highlight a key phrase or quote from the article it accompanies. Styling uses the same standards as the testimonial.

G: Byline


The byline attributes the article to a specific author and/or conveys any documentation of sources. Footnotes may be included in this section as well, before the byline itself. Styling uses the legal & disclaimer copy (link opens in new window).

How Can I Use This Rendering?

Sample configurations

Article with image, pull quote, and sharing

Eat right for weight loss


Jan. 22, 2015

Jan. 22, 2015

Everyone’s looking for a weight–loss magic bullet, but the true way to trim down is to control your calories.

Like most people, you've probably heard a lot of weight–loss "wisdom” such as “cut the carbs," "avoid fat," and "pack in the protein." Then there are the many trendy diet plans: the cabbage soup diet, goji berry diet, egg diet, the juice diet, you name it! Some of these might help you lose weight in the short term. But staying on many of them can damage your metabolism — not to mention leave you bored and hungry from their limited menus!

There are also the diet plans you can buy, which typically come with prepackaged foods. While these can be a good way to learn about portion control and may be more balanced in terms of vitamins and minerals, they can be expensive.

So how can you lose weight? Use more calories than you're consuming. It really is that simple. And the two proven ways to do this? Eat less and exercise more. Keep things simple by making sensible choices on a day–to–day basis.

Finding your "caloric balance"

Article sub heading 2

So where do you start? The first thing to do is to see your doctor and learn how many calories you need each day. From there, you can work backward to see how many calories you can safely cut to lose weight at a sensible rate.

Something you can do right now is learn about your Body Mass Index (BMI). This is the ratio of your weight to your height, and the Centers for Disease Control's (CDC) online Body Mass Calculator is a handy tool.

You can also start thinking about your caloric balance. Here's a simple explanation from the CDC:

If you are...

  • Maintaining your weight, you're "in balance." You are eating roughly the same number of calories that your body is using. Your weight will remain stable.
  • Gaining weight, you're "in caloric excess." You are eating more calories than your body is using. You will store these extra calories as fat and gain weight.
  • Losing weight, you're "in caloric deficit." You are eating fewer calories than you are using. Your body is pulling from its fat storage cells for energy, so your weight is decreasing. To lose about 1 to 2 pounds per week, you need to cut the number of calories you take in by between 500 and 1,000 calories per day.
Here are helpful tips on cutting calories from the CDC:
  • Replace high–calorie foods with low-calorie foods. Foods that have lots of fiber and water are good ways to feel full without eating too many calories.
  • Learn to eat fruits and vegetables instead of high–calorie snacks. They're a great way to fill up and get lots of good nutrition for fewer calories.
  • Think about your drink. We often forget that there can be hundreds of calories in our beverages. Coffee drinks with lots of cream and syrup, smoothies loaded with sugars, and certain alcoholic drinks, can pack as much as 500 calories. This is as much as an entire meal in a single cup.
  • Rethink your serving sizes. Portion sizes can cause you to eat more calories than you realize. Studies show that people consume more calories when faced with larger portions, even though they don't mean to.

Lastly, don’t forget to exercise! When you don't exercise, you place the entire burden of weight loss on your diet. Being more active means that you can eat more of the things you like and still lose weight. The key is finding an exercise you enjoy. And whatever you do, try to get one hour of exercise each day. Every step toward healthier living is a step in a good direction.

Step 1: Know where your money goes

Article sub heading 2

"The true way to trim down is to control your calories. They are the key to successful weight loss."

The first thing you need to do is find out where your money is going. Track everything you spend. One way you can do this is keep track of receipts: all of them. Gather your receipts at the end of a week and sort them into groups. If you use a debit card often, you can check your bank statement to see where you're spending.

Be sure to include everything - from cash and credit card expenses to online banking and automatic withdrawals. Keep receipts in an envelope or record them as you go on a spreadsheet.

"The true way to trim down is to control your calories. They are the key to successful weight loss."