Why do web editors use card blocks?

Cards include a photo, subheading and text inside a box, or “card,” which can be stacked next to others to show an array of program/service options to the user. Cards provide visual and text indicators to help a user make decisions. Use cards as a series not as an individual item in a section.

What layouts can card blocks be used in?

Cards can be used in the two to four column layouts.

Who can use card blocks?

Builders and Super Builders can create and edit image blocks.

Step-by-step instructions

1. Choose "Cards" in the add custom blocks menu.
2. Title: This is an administrative title that will be used to identify the block and not displayed on the website. 
3. Image: In the section called "Image," click on the "Add media" button. This will launch OC's media library.
   • In the media library, you have two options:
     1. type in the name of the image file you need. The library will filter the results and display only images that match your search terms; or,
     2. scroll through the images displayed in the library until you find what you are looking for. If your group has a lot of images, you can click on the arrow buttons at the bottom of the library (>>) to load the next page of images in the library.
   • Click on the image you want to insert. Clicked on the wrong image? That's okay. Just click on the checkbox in the top right corner of the image to de-select it. Then choose the right image.
   • Click "Insert selected" in the bottom left of the gallery screen.
   • Under "Image orientation" section, click on the dropdown and select either "portrait" or "landscape." This will tell the Drupal system what the photo orientation is, and will automatically size it in the column for you.
4. Header: The is an optional field to display a header above the useful links. Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
5. You will have a choice of heading colours depending on the choice of background colour selected. 
6. Body: This is where you will enter the text you want to display once the (+) is clicked open. The body field uses a WYSIWYG (what-you-see-is-what-you-get) text editor where you can type or copy paste text into. If you copy paste make sure you always clean the formatting after you paste. Do this by highlighting the text and clicking on the clear formatting icon (T_x) on the top ribbon.  This will remove any unnecessary formatting copied over from a word doc or pdf file.
7. Link: This is where you insert your link and choose if you want the entire card to be a link or just a line of text.
   • For internal links: start typing the name of the page or media item (pdf) in the URL field and select the page you want to link to.
   • For external link: copy paste the external link.
   • For a linking to a line of text, type in the link description into the link text field. 
   • For linking the whole card, select the "Card as Link" checkbox.
   • For external links or pdf files: click on attributes and select new window for the target.
8. Click the "Add block" button.