Uses

Tags are used to categorize content and are typically found in news and blog articles. An article can have multiple tags and can be used for grouping of similar articles with related tags.

Styles

Tags are shown in all uppercase letters and are typically a small font-size than the rest of the content surrounding it. On the School of Medicine site, tags are shown at the bottom of the card for each article post. The tag has a color of #838383 and a font-size of 13px.

Tags are also shown on individual article pages directly above the article title. The font-size for these tags is 12px and have a color of #6e6e6e.

Examples

This example shows the tag "News Release" for this particular news article. This is found on the news listing page on the School of Medicine site.

This example shows the tag "News Release" for this particular news article. Notice the tag is in all caps directly above the article title. This is found on individual article pages on the School of Medicine site.

Code

HTML
*------------ In News Card ------------* <p class="news-source">News Release</p> *------------ Article Page ------------* <div class="news-type"><a href="https://medicine.wustl.edu/news/type/news-release/">News Release</a></div>
CSS
*------------ In News Card ------------* .news-card { text-transform: uppercase; color: #838383; font-weight: 600; font-size: 13px; line-height: 1.3; margin-top: 15px; } *------------ Article Page ------------* .news-type a { color: #6e6e6e; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; font-size: 12px; }
Washington University School of Medicine - Design System

Uses

Tags are used to categorize content and are typically found in news and blog articles. An article can have multiple tags and can be used for grouping of similar articles with related tags.

Styles

Tags are shown in all uppercase letters and are typically a small font-size than the rest of the content surrounding it. On the School of Medicine site, tags are shown at the bottom of the card for each article post. The tag has a color of #838383 and a font-size of 13px.

Tags are also shown on individual article pages directly above the article title. The font-size for these tags is 12px and have a color of #6e6e6e.

Examples

This example shows the tag "News Release" for this particular news article. This is found on the news listing page on the School of Medicine site.

This example shows the tag "News Release" for this particular news article. Notice the tag is in all caps directly above the article title. This is found on individual article pages on the School of Medicine site.

Code

HTML
*------------ In News Card ------------* <p class="news-source">News Release</p> *------------ Article Page ------------* <div class="news-type"><a href="https://medicine.wustl.edu/news/type/news-release/">News Release</a></div>
CSS
*------------ In News Card ------------* .news-card { text-transform: uppercase; color: #838383; font-weight: 600; font-size: 13px; line-height: 1.3; margin-top: 15px; } *------------ Article Page ------------* .news-type a { color: #6e6e6e; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; font-size: 12px; }