Ring Short Code

Back

Ring

Displays a blue ring around a piece of content in order to highlight it. Can accept nested text based shortcodes like note and box. img short codes will not render, do not use within ring shortcode. This was originally created for the HCD guides.

Overview

Used to organize related content with a blue border ring.

Guidance

Note

Need more clarity on when and where to use this short code

Examples

Ring

The ring short code takes a title field for the header and can accept markdown and html within it. But no images.

{{< ring title="Additional Resources">}}

If you encounter unfamiliar words or concepts in these guides, you can find definitions and explanations in the <button class="dg-glossary__toggle">glossary</button>

You may also wish to review these additional research methods:

- [18F Methods](https://methods.18f.gov/)
- NYC Civic Service Design Group [Tools & Tactics](https://www1.nyc.gov/assets/servicedesign/)
- UK Design Group [Case Studies](https://www.designcouncil.org.uk/resources/search)
- The Book Apart Series, specifically [Design for Real Life](https://abookapart.com/products/design-for-real-life) by Eric Meyer & Sara Wachter-Boettcher

{{< /ring >}}

Example

Live page: Design concepts guide: up next.

Usage

Note

When and where should this be used?