Module Library
There are 13 content modules available for web editors to mix-and-match across their pages, some with multiple variants. Browse this library get inspired designing the pages
you edit.
Text block
This is a Text Block, but is also known as a Rich Text Editor or WYSIWYG. All of the styling options you’re familiar with from Word are included here, along with a bunch of different formatting and styling options. You can get a closer look at the Text block here.
Tables
You can add tables into a text block if needed by clicking the “table” icon in the Text block toolbar.
| lorem | ipsum |
| lorem | lorem |
Here’s another example of a table. You can go to Cell > Table Cell Properties to format highlighted cells as Header cells.
| First Name | Last Name |
Jurisdiction Name
|
|---|---|---|
| Jalesia | Brown |
City of Long Beach
|
| Teija | Sudol |
City of New York
|
| Luke | Bassis |
Port Authority of NY and NJ
|
| Elisabeth | Lemquist |
City and County of Honolulu
|
| Fernando | Baltar |
Attorney General’s Office
|
Media
You can also add images from the Media library by clicking Add Media.
Video
Paste a Youtube link directly in the text editor and your video will display.
IFrames
Add IFrames by pasting the URL of your PowerBI dashboard into Add IFrames in the toolbar.
Accordion Module
Optional text goes here if you need to describe what is housed in the accordion trays below.
Accordion Module with Content Builder
Banner Story Blade
Cards: Carousel
There are a few ways to use the Cards: Carousel component. The first is super straightforward: you’ll use it to manually populate as many cards as you want with whatever content you want.
Cards can either link to another page or website, or directly download a document or file.
Cards: Carousel (Manual)
You can also use the Cards: Carousel module to dynamically pull in content from OFM’s Calendar and News & Publications.
To do that, you’d select the “Post” option, and select the type of content and categories that will automatically populate your cards. The example below is configured to show the most recent 4 news posts.
Cards: Carousel (Post Feed)
Carousel: Color Cards
These are available as "Single" cards
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Carousel: Color Cards
Square Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Rectangle Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Square Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Rectangle Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Square Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Rectangle Card Title
Card Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Downloads Module
Use this to module to collect all downloadable content in one recognizable place on your page. You can easily select which icon to display to help the reader know what they are downloading or being linked to.
Downloads Module
Downloads Module can also be used for related links!
Quick Links
Quick Links
Stats Module
Story Blade (with image aligned Right)
Storyblades are a great way to callout or feature content on a page with a corresponding image. They are designed to allow for a pretty decent chunk of copy. Depending on the length of your title, you can fit several sentences in the Description field. If you find that you do not have enough description text to make a Storyblade module work, try the Tiles: 3-across module instead (see below).
Story Blade (with image aligned left)
You can stack Storyblade cards on top of each other, and change the alignment of the image, to create a “zig-zag” the draws the eye down the page.
Table Module
| Request Type | OFM Turnaround Time |
|---|---|
| Standard request up to 20,000 SF | 30 days |
| Requests greater than 20,000 SF (requires LCCM) | May require additional processing time |
| Temporary space request for 12 months or less | 10 days |
Text + Callout Module
Text field takes up 2/3 of the section. Both the text and callout fields are rich text editors, with all of the styling options available as in the Text block.
This module works best if you keep the content in this column approximately the same visual length as the column in the right column.
Callout takes up the other 1/3. These are great for bullet points, quick links, or scanable information.
- Bullet point
- Example link
Tiles: 3-Across Module
Optional description field here. You can use this module with or without icons, and with or without CTA links. It is a nice alternative to the Storyblade module for shorter pieces of content.
Tile Title
Tile Title
Tile Title
Form module
Forms are pretty rare on the OFM site. If you need a new webform created for your page, please reach out to alma.perez@ofm.wa.gov
Once it’s been created, you can insert your form on with the Form module, and selecting it from the “Choose from” dropdown. Below is an example of the Create Environmental Justice Assessment Notice form.