Official State of Rhode Island website

State of Rhode Island Department of Environmental Management

Example of a Basic Page Layout

The (optional) intro text paragraph should describe the program/initiative goals and provide high-level information. 

If the webpage omits intro text and does not begin with text, please input a few sentences into the "Summary" box that appears at the top of the editable page. The summary text does not appear on the webpage. Instead, it is used by search engines as a description for people to determine if the content fits their search.

H2: High-Level Titles/Main Content (appears gray and large)

H tags are used to differentiate text to display content in a hierarchy of importance. Screen readers used by people with disabilities will read all text in H2 format first. Then it goes through H3 through H6 tags (if used). 

H3: Content/Section Headers (appears green and slightly smaller than H2)

H3 stylings are most often used and help title content sections. H4-H6 stylings should be used to differentiate text that is less important than H3 information, but higher in importance than paragraph text.

Paragraph text is for body text style. You can format paragraph in bold, italic, or a combination of both to help differentiate information.  You can also style text into bullet points or numbered lists. All stylings are set using the toolbar at the top of the editable text box.

  • Bulleted list
    • Sub-bullets
      • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1. Numbered list
    1. Sub-number
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Remember, link text should be descriptive. 

For accessibility, do not title links "click here." Screen readers will not be able to convey any meaning to the link destination. Instead, use descriptive text, the title of the document, or the destination of the link.

Example:

Example of a data table caption
This is a row header that is merged across columns
One Two Three
Four Five Six

Below are examples of content components that provide dynamic layout options:

Icon Button Sized at Full Column Width (Primary Color) Button Sized at Full Column Width (Secondary Color)
Half Column Width (Accent Color)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tempor commodo ullamcorper a. Ac ut consequat semper viverra nam libero. Adipiscing diam donec adipiscing tristique. Orci eu lobortis elementum nibh tellus molestie nunc non blandit. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Volutpat odio facilisis mauris sit amet massa. Viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae. Vitae justo eget magna fermentum iaculis.

shellfish transplant
Example of image left-aligned, in smallest size
shellfish transplant
Example of image left-aligned, in medium size
shellfish transplant
Example of image center-aligned, in largest size

Card Component

A card component is a great way to highlight important information, such as a public notice or timely alert, since you can opt to place a color behind the card. Choose from primary light or gray (coffee) for a subtle background color. The Primary color changes the background to a dark color and should be used for short text since it can overwhelm the content. 

More examples and information on cards

Icon Card Example

Icon cards are most often used to display lists of links (quick links).