Back to top

Headings

Basic Pages should include hierarchical Heading structure. You can find Heading styles listed under the 'Paragraph' dropdown in the toolbar. Content writers can select the Heading level for a highlighted portion of text.

Heading style location screenshot

Heading hierarchy

H2 headings indicate major topics within the overall page topic. H3 headings indicate subtopics contained under an H2 heading. H4 headings indicate subtopics contained under an H3 heading and so forth for H5 and H6 headings. Headings should be in a hierarchical order - H1, H2, H3, H4, H5. In the content editor, you can view and hover over each of the bolded words to confirm H4 follows an H3 and not immediately after an H1 or H2.

Back to top

Bold and italics

Bold and italic text should never be used to indicate headings. Bold text should be used to emphasize specific information the user needs to know. Use italics for sources of information or titles of complete works, such as books, films, journals, or music pieces.

Back to top

Bulleted and numbered lists

Bulleted lists and numbered lists must have more than one item. The list format is only used for items that are related to each other.
Valid list examples:

  • Peaches
  • Oranges
  • Pears
  • Grapes
  1. Alabama
  2. Alaska
  3. Colorado

Invalid list examples:

  • Friday, March 21, 2025
  • This is a paragraph of some text about U.S. History. Donec sit amet dui ipsum. Nullam quis elit vel dui fi nibus elementum eget vel ex.This is a paragraph of some text about U.S. History. Donec sit amet dui ipsum. Nullam quis elit vel dui fi nibus elementum eget vel ex.
  • This is a second paragraph about mathematics. Fusce fringilla turpis ut neque suscipit, sit amet eleifend lacus dignissim.
Back to top

Block quotes

A block quote is a quotation formatted as a separate block of text, indented from the left margin and placed on a new line. When using the block quote styling from the WSYWIG menu, you do not need to add quotation marks.  Do not use block quote just for indentation.

Sunshine is delicious, rain is refreshing, wind braces us up, snow is exhilarating; there is really no such thing as bad weather, only different kinds of good weather." - John Ruskin

Back to top

Images

Images can be added to the Media Library and embedded in Basic Pages. Size and display options include full-screen, small left-justified, small centered, and small right-justified. Text will wrap around the small sized images.

Full screen image

To embed a full screen image, click the Insert from Media Library icon in the WYSIWYG toolbar. Select the desired image and embed. This will embed a full screen image.

Insert media icon screenshot

Click the icon with the picture and musical note to insert any type of media.

Full screen image screenshot

Fall foliage of red and orange tree leaves on a winding road.

Small left-justified image

Small centered image example

Fall foliage of red and orange tree leaves on a winding road.

To embed a small left-justified image, click the Insert from Media Library icon in the WYSIWYG toolbar. 

Select the desired image and embed. This will embed a full-screen image. You'll need to click on the image to change its size and alignment. Clicking the image will open a pop-up menu. Select Small from the size choices and the Left alignment choice. 

Once embedded in the page, the image can be positioned by dragging and dropping where desired within the content.
 

 

Small centered image

To embed a small, centered image, click the Insert from Media Library icon in the WYSIWYG toolbar. Select the desired image and embed. This will embed a full-screen image. You'll need to click on the image to change its size and alignment.

Small centered image example

Fall foliage of red and orange tree leaves on a winding road.

Clicking the image will open up a pop-up menu. Select Small from the size choices and the Centered alignment choice.

Image alignment screenshot

Choose full screen or small, then choose the alignment.

Once embedded in the page, the image can be positioned by dragging and dropping where desired within the content.

Small right-justified image

Small right-justified image example

Fall foliage of red and orange tree leaves on a winding road.

To embed a small right-justified image, click the Insert from Media Library icon in the WYSIWYG toolbar. Select the desired image and embed. This will embed a full-screen image. You'll need to click on the image to change its size and alignment.

Clicking the image will open up a pop-up menu. Select Small from the size choices and the Right the right alignment choice.

Once embedded in the page, the image can be positioned by dragging and dropping where desired within the content.

Back to top

Remote videos

Remote videos can be added to the Media Library and embedded in Basic Pages. Size and display options include full-screen, small left-justified, small centered, and small right-justified. Text will wrap around the small sized video embeds.

Full screen remote video

To embed a full screen video, click the Insert from Media Library icon in the WYSIWYG toolbar. Select the desired remote video and embed. Once embedded in the page, the remote video can be positioned by dragging and dropping where desired within the content.

Learn how to easily embed Media Library items such as Remote Video or Images, using the text editor.

Small left-justified remote video

Learn how to easily embed Media Library items such as Remote Video or Images, using the text editor.

To embed a small left-justified video, click the Insert from Media Library icon in the WYSIWYG toolbar. Select the desired remote video and embed. This will embed a full-screen video. You'll need to click on the video to change its size and alignment.

Clicking the video will open up a pop-up menu. Select Small from the size choices and the Left alignment choice.

Once embedded in the page, the remote video can be positioned by dragging and dropping where desired within the content.

 

Back to top

Small centered remote video

To embed a small, centered image, click the Insert from Media Library icon in the WYSIWYG toolbar. Select the desired image and embed. This will embed a full screen image, and you'll need to click on the video to change its size and alignment.

Learn how to easily embed Media Library items such as Remote Video or Images, using the text editor.

Clicking the video will open a pop-up menu. Select Small from the size choices and Centered from the alignment choices.

Once embedded in the page, the remote video can be positioned by dragging and dropping where desired within the content.

Small right-justified remote video

Learn how to easily embed Media Library items such as Remote Video or Images, using the text editor.

To embed a small right-justified image, click the Insert from Media Library icon in the WYSIWYG toolbar. Select the desired image and embed. This will embed a full-screen image, and you'll need to click on the video to change its size and alignment.

Clicking the video will open a pop-up menu. Select Small from the size choices and Right from the alignment choices.

Once embedded in the page, the remote video can be positioned by dragging and dropping where desired within the content.

Back to top

Tables

Tables can be added to the page content. Tables are a great way to display information in an easy-to-read format. To embed a table, select the Table button from the editor's menu. For example:

Example Table: Items Purchased at Farmer's Market
PurchaserApplesOranges
Bob53
Abigail413

Additional guidance on adding tables

Back to top

Accordion

Accordions are a great way to display information by topic when the user may only need select information. To create the Accordion, select Content > Add Micro-content > Accordion from the Drupal menu.

Once you've created the Accordion, you can embed it into a Basic Page by clicking on the Insert from Component Library icon on the WYSIWYG toolbar and selecting Accordion. This will open up a dialogue box so that you can select the desired Accordion from the Library or create a new one.

Insert from component library screenshot

Insert from the Component Library.

List items for Accordion - for different types of user

Here is an accordion list of information about the different author types.

All authors usually have a "Writer," "Editor," or "Publisher" role. This role lets them submit content to their agency website.

Fewer publishers are in each user pool. Publishers must communicate with writers and editors to decide which items are ready for publication.

Back to top

Automatic List

Automatic Lists are a great way to add Contacts, How-Do-I Pages, Basic Pages, Events, Locations, Documents, or News that are updated frequently or have a large number of items. To create an Automatic List, select Content > Add Microcontent > Automatic List from the Drupal menu.

Automatic Lists can be filtered by topic, type, area served, and/or Division/Section.

Once you've created the Accordion, you can embed it into a Basic Page by clicking on the Insert from Component Library button in the text editor menu and selecting Automatic List. This will open up a dialogue box so that you can select the desired Automatic List from the Library or create a new one.

Back to top

Contact

Embedding a Contact into a Basic Page is a great way to help users connect with vital personnel who can provide assistance or information as needed. To create a Contact, select Content > Add Microcontent > Contact from the Drupal menu.

Once you've created the Accordion, you can embed it into a Basic Page by clicking on the Insert from Component Library button in the text editor menu and selecting Contact. This will open up a dialogue box so that you can select the desired Contact from the Library or create a new one.

For example, if I wanted users to contact Nikki Flores when they had a question about creating content on their new site, I would embed a Contact.

Back to top

A Link Collection List is a great way to present a collection of related links that won't be updated frequently. To create the Link Collection List, select Content > Add Microcontent > Link Collection List from the Drupal menu.

Once you've created a Link Collection List, you can embed it into a Basic Page by clicking on the Insert from Component Library button in the text editor menu and selecting Link Collection List. This will open up a dialogue box so that you can select the desired Link Collection List from the Library or create a new one.

For example, the following Link Collection List provides users with a collection of resources related to creating websites.

Back to top

Promo

A Promo is a great way to emphasize or highlight content that you want users to visit. A promo can feature a News Page, a Landing Page, a How Do I Page, a Location, a Contact, or Event. To create the Link Collection List, select Content > Add Microcontent > Promo from the Drupal menu.

Once you've created a Promo, you can embed it into a Basic Page by clicking on the Insert from Component Library button in the text editor menu and selecting Promo. This will open up a dialogue box so that you can select the desired Promo from the Library or create a new one.

For example, the following Promo highlights information about the progress of the Governor's Digital Transformation Initiative.

Agency Website Launches

Iowa agencies move onto the updated platform

Sites are converting on a regular basis to a unified platform, sharing architecture, colors and styles, and approach.

Iowa.gov website
Back to top

Statistics

A Statistics microcontent block is a great way to highlight your agency's achievements and contribution to the success of all Iowans. To create the Link Collection List, select Content > Add Microcontent > Statistics from the Drupal menu.

Once you've created a Statistics block, you can embed it into a Basic Page by clicking on the Insert from Component Library button in the text editor menu and selecting Statistics. This will open up a dialogue box so that you can select the desired Statistics from the Library or create a new one.

For example, the following Statistics block highlights the number of sites that have been updated to the new platform. Keep in mind that this information does not auto-update, so someone will need to manually update the Statistics block once new sites have been migrated to the new platform.

Sites on the platform

40+

agencies moved to the DX Platform 

Back to top