Learn how to manage notices and alerts on your colorado.gov website.

 
0

Rows and Cards

What are Rows and Cards?

#FFFFFF
A image showing rows and cards as colored rectangles

The Drupal 8 platform implements an organizational system of Rows and Cards.  To use this system; select the Rows and Cards tab on the editing page.

  1. Rows organize content in horizontal rectangles with set widths depending on Row selection. The height of a Row is set by the amount of content contained in its Cards.
  2. Cards organize content by type.

A visual of this is shown in the diagram to the left. The diagram shows 2 rows (black) on a page (blue). In this case the top row contains 3 cards (white). 

Build with Rows and Cards

To build a page using Rows and Cards, Edit or Create a page and navigate to the Rows and Cards tab. Add a row to the page. The default row selection is Add Row – Equal Columns

Screenshot showing how to add a row
Screenshot showing how to add a card

Next, add a Card to the Row. The default Card selection is Add Card - Basic.

Each row is customizable by using the tabs within that element. Additionally, each row may be moved up or down on the page by clicking the plus sigh in and dragging and dropping the row, and each card may be rearranged within it’s row in the same way.

Click Save

Screenshot showing the plus sign to drag and drop a row from