Gutenberg Block Examples

Headings Start at 2

Headings Should be in Chronological Order

Heading 4

This is a paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Flagging Pages for Compliance

Many pages across the website are required to be updated on certain dates, for accreditation, licenses, etc. The Office of Web & Digital Strategy has created a way for you to flag content that is required for compliance.

To do so, navigate to the page that is required for compliance and click Edit.

How to Create or Edit a Page

How to Create a New Page

  1. Click on Manage in the black toolbar at the top of the screen
  2. Hover over Content in the white toolbar right below the black one
  3. Hover or click on Add Content to see the types of content you can create
  4. Select Page

How to Edit an Existing Page

  1. Be logged in to the site
  2. Go to the URL of the page you're wanting to edit
  3. Scroll down until you get just past the header image at the top of

How to add a PDF

You can upload and add a PDF directly through the site editor. Click the black plus sign to add a new block, type file or scroll down to find the file block.

Click upload or select media library if the file has already been uploaded to the site. Select the file and click open. You will then be taken back to the editor where it will prompt you to enter the file description.

**For accessibility your filename should match the title of your document.

CSS Class Cheatsheet

.narrow

.wide

.padding-top

.padding-bottom

.padding

.no-padding

.no-margins

.no-border - for links you dont want the underline add a class under advanced for the link block

.hide - hides element by adding display:none;

.visually-hidden - hides visually but still accessible by screen readers

.video-full - makes video full-width and responsive

.col2

.col3

.grid3

.grid4

.grid5

.grow

.card

.center

.intro-txt

.para-indent

.btn

.bg-gray