Component-based Page Building

Component-based Page Building

Website Documentation / Creating Content

Components are pre-designed patterns that work well on mobile devices, tablets and traditional computers. These components have been built with accessibility in mind to help you produce accessible content easier.

Components allow you to have well designed page elements without having to know how to write website code or be a graphic designer. Components can be used in multiple content types such as Webpage and Events.

There are two main categories of components → Containers and Blocks. You will first need to choose your container component and then choose what block components you want to be in that container.

Container Components

Container components are what provide “structure” to your page. They let you assign Sections that divide up your content. This can be as one big single column, equal sized columns, or columns of different sizes.

Here are some basic container component options:

  • Single Column Section
  • Two Column Section‡
  • Three Column Section‡
  • Four Column Section‡
  • 8/4 Section†‡
  • 4/8 Section†‡
  • 6/3/3 Section†‡
  • View section examples

‡ If you are using a container component with more than one column, each column will be contained inside of a Content Box — each content box will then contain one or more block type components to make up the content contained in that column. Content boxes can be reordered as required. 

† Section descriptions with numbers are based on a 12 column grid with the number representing how many coumns that that each section is taking up. An 8/4 section would have two columns with the first column taking up 8 of the 12 grid columns and the second taking up 4.

NOTE: Some Container components combine Container and Block-level content. These components are always displayed across the full width of the screen. Although Block components cannot be added to these types of components, we still label them “Container components” because they cannot be put inside another Container.

Examples of these would be:

Block Components

If Container components are the “house”, Block components are the things you put in that house. They are the main building tools – or, “building blocks,” if you will – of your page and may be similar to what were used on the older site if you built Components Page content. Using the container components adds extra flexibility, allowing you to have multiple block components side by side on a page rather than having to have them stacked on top of each other.

For example, you can select the Container component of Two Column Section and then add a Person Bio block component to “reside” in both the left side and the right side.

Here a links to view most of the Block Components:

Documentation Categories