Content Rows

Content rows are the building blocks for pages and other content types. They allow you to add and arrange content in various formats on a page/node. You can rearrange and add as many as you like until you have the desired layout.

Below you will find instructions for creating content rows and the types of rows available.

How to add a content row

To add a content row to a page or node, log in to Drupal and either add a new page or content type, or navigate to the existing page or node you want to edit. Once in the editing interface, follow these steps:

  1. Scroll down to the "Content row(s)" section and click "add content row'

    Image

  2. Enter a "Row title" if applicable. This will show as a heading 2 for the section and is optional.
  3. Enter  "Row content" or description if needed.

    Image

  4. Under the "Row component" section, select the type you would like to use for your content. 
Image

  1. Once you've selected your row component, fill out the fields for that component. 
  2. Continue to add more content rows to your page/node as needed by clicking the "Add Content row" button. Once you've added multiple content rows, you can use the six dots on the left of the content row to drag and drop rows to rearrange the order as needed. Make sure to save your page/node once you're finished editing. 
Image

Content

Content rows are the base standard row type. This content row includes all the key elements of a word processor such as headings, block quotes, tables, media, and links. This is sometimes referred to as a What You See Is What You Get (WYSIWYG) editor.

Heading 2

Heading 3

Heading 4

Heading 5
heading 6

On This Page

On This Page provides an overview of the content on a page, along with links that take users to each section.

Accordions

Accordions organize information by "hiding" content under individual tabs that can be opened or closed as needed.

Cards

Cards are used to emphasize links and include a description, a title, and an optional image.

Use JPG images with a ratio of 16:9, max size of 832x468px.

Card #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis.

Card #2

Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi.

Horizontal cards

Horizontal cards are like regular cards, but with the addition of a longer description.

Use JPG images with a ratio of 16:9, max size of 880 x 495px.

Horizontal card #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, temp

Horizontal card #2

Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, temp

Horizontal card #3

Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien. Cras ex felis, tempus non mi at, consequat ultricies velit. Aenean sed ante id ante eleifend tincidunt. Aenean lobortis rutrum semper. Donec ru

Emphasis

The emphasis content type helps to highlight important content. It inserts a singular eye-catching block with a quote icon that can toggle on or off.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis.

Image

Snow-capped mountain with forest and town below under cloudy sky.
Caption or credit (optional)
Snow-capped mountain with forest and town below under cloudy sky.

Image and text rows

The image and text row allows users to insert an image alongside a WYSIWYG text block.
Use JPG images with a ratio of 16:9, max width of 352px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien. Cras ex felis, tempus non mi at, consequat ultricies velit. Aenean sed ante id ante eleifend tincidunt.

Snow-capped mountain with forest and town below under cloudy sky.

Links block

The links block combines multiple links into one section where they can be easily accessed.

Notice

Notices are coloured blocks that highlight key information to users.

Notice #1

Curabitur molestie eu felis et pharetra. Etiam commodo velit vitae diam convallis, sit amet elementum elit venenatis. Curabitur vel nisi ut purus lacinia ultricies blandit at justo. Morbi ut metus vitae ante pharetra ullamcorper. Fusce interdum ex non augue ultrices porta in ut mi. Fusce molestie efficitur tincidunt. 

Quick links

Quick links are like regular links but with a fontawesome icon.

View

Views organize content by showcasing different displays such as a calendar, a grid, or a news section. 
For example: if you want a list view of the Events content type on your council page, you can us the View content row option.

Webform

Webforms make it easy for users to fill out surveys, submit service requests, book meetings, and much more, all while staying within the website. 

Radios