黑料网

Skip to main content
School of Medicine IT Web Guide

Ribbon Boxes

Creating A Ribbon Box

Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.

  1. Determine where the Cell will be used.
  2. In the Dashboard, select Cells in either the top or left-hand navigation.
  3. Select the Add New button.
  4. Cell Name: provide a descriptive name so that site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.
  5. Layout: Repeatable Boxes
  6. Box Category: Image Boxes
  7. Box Style: Ribbon Boxes
  8. Define the base settings
    1. Primary Heading and Primary Text:聽 display above all the ribbon boxes.
    2. Add Title Accent Underline: this pertains to the short yellow underline that displays under the Primary Heading.
    3. Include Link (Global): selecting Yes will provide you with the choice of adding an optional link per box.
  9. For each box:
    1. Select the Add New Box button.
    2. Image: Upload and image.聽Note: parts of the image may appear cropped due to the responsive design of the cell.
    3. Image Alt Text: this should be a short description about the appearance or function of an image. It is聽required for all images that provide meaningful information. View our accessibility documentation for more information.
    4. Include Link:聽include the url that you wish the box to link to. This option only appears if you chose to Include Link (Global) option in the base settings.聽It is strongly recommended to either link all boxes or none at all, to ensure a consistent user experience. In cases where both linking and non-linking boxes are present, a link icon will appear in the upper right-hand corner, indicating which boxes have links. This practice promotes accessibility by clearly distinguishing between linked and non-linked content.
  10. Click the Create Cell button.
  11. If you’re ready, you can display the Cell on your website.