How to create a cards container block

 

How to create a cards container block
  1. Navigate to the _blocks subfolder of the folder your page is located in. 
  2. Go to + Add Content and select Blocks > Cards Container.
  3. Name the block using the correct naming convention: block-type-page-purpose (for example, cards-default-alumni-landing.)
  4. Confirm the block is going into the correct placement folder.
  5. If you would like your card block to have a coloured background, select Yes to Add a colour block background and select the colour in the Background section that appears. Please note: if you choose to have a coloured background, your container needs to go within it's own section on your page. Otherwise, leave this field as No.
  6. If you're creating a single card, select Yes to the Full-width card. If you're creating multiple cards, leave this field as No. 
  7. Expand the Cards section. Leave the setting as Manually pick cards.
  8. Expand the Card row. Select your Card type. Refer to the examples above to see what the various card types look like and their use cases. Do not mix different types of cards in the same block. In most cases, you'll use a default card.
  9. Complete the appropriate fields for the card type you've selected. This will always include a title, as well as a link (which can be internal to the site or external), and in most cases, will also include some body text and an image. For information on adding new images, see our images and documents page.
  10. Once you've completed your first card, select the beside the first card row to add another, and proceed with filling in all the applicable fields until you've created all your cards.
  11. Select preview draft, then submit. Correct any spelling errors or broken links.
  12. Add the blocks container to your page in a new section. 

 

How to create a single full-width card.

Examples of various card types

SAIT parking garage

Default card

The most commonly used type of card on sait.ca This should be used to link to another page or section on sait.ca or affiliate such as ConEd or saitsa.

Default card

This is a default card with no image. Can be used if there are already a lot of visual elements on a page. The card height will adjust to match the largest card in it's row. 
Parking garage
Link Group Card

Wave card

This card should be used to link to profile pages or modals, such as executive bios or expert profiles. 

Program cards

Dynamically pulls in the program image, title, credential type and whether there are any open intakes.

Administrative Information Management
Administrative Information Management
  • Certificate icon Diploma
  • Program Length: 2 years
  • Campus: In person (Main Campus)
  • Faculty: School of Business
Learn more

Borderless cards

Use to share specific stories or campaigns. Use on the homepage flex spaces. This is the default card type when creating story list blocks. 

Mini cards

Smallest card type. Includes a card title only, with a small character limit. 

Mini card
Learn more

Full image card

Includes a portrait image background and title. Works well in sliders/carousels. Will stack in rows of four cards. 

Icon cards

Icon cards

Somewhat similar to default cards, but offer a selection of icons rather than a photograph or image.

Link label

Other card types 

The below card types are for specific sections of sait.ca and should only be used in those instances.

Strat plan card

For use within our strategic plan section and related areas. 

Learn more
a view of the moutains and stream in between

Oki, Âba wathtech, Danit'ada, Tawnshi, Hello.

SAIT is located on the traditional territories of the Niitsitapi (Blackfoot) and the people of Treaty 7 which includes the Siksika, the Piikani, the Kainai, the Tsuut’ina and the Îyârhe Nakoda of Bearspaw, Chiniki and Goodstoney.

We are situated in an area the Blackfoot tribes traditionally called Moh’kinsstis, where the Bow River meets the Elbow River. We now call it the city of Calgary, which is also home to the Métis Nation of Alberta.