...
- Displaying details about 2-5 categories on a webpage
- You need to display more information than will fit in a card
- Adding specific details to a program subpage (e.g. Adding applied learning details to a Curriculum page)
Editorial Guidelines
Follow our general Web Copy General Guidelines in addition to the following:
Tab name (button)
- A short category label that is displayed in each tab button.
- Character limit: 1-2 words, 30 characters for each tab
- If you are including 5 tabs, a developer may request shorter tab labels to ensure the content fits in the layout.
...
- Use Bootstrap "row" and "col" classes to create multi-column layouts
2 Columns - 60% / 40%
| Code Block | |||||
|---|---|---|---|---|---|
| |||||
| |||||
<div class="row"> <div class="col-12 col-lg-7 pe-lg-5"> ADD CONTENT </div> <div class="col-12 col-lg-5 mt-4 mt-lg-0 "> </div> </div><hr class="hr-gray my-4" /> |
3 Columns
| Expand | ||
|---|---|---|
| ||
<div class="row gx-5"> |
Horizontal rule
- Code: <hr class="hr-gray my-4" />
Photo
- Use the add media button to find the image in the media library and it will be added to the WYSIWYG as an <img> element
- Add alt text
- Change the width and height values to fit your layout
- Use WP align classes (alignnone, aligncenter, etc.)
- Add "brand-border-radius" class to round 2 of the image's corners
- Optional: add a container div around the image for additional styling
...