Digital Component Library

Collection Cards

  • Usage

  • Style

  • Content

  • Accessibility

  • Usage

  • Style

  • Content

     

    Written Steps:

    Step 1: In the CMS (Umbraco), locate the site you want to create a Collection of Cards for, in the navigation pane on the left hand side

    Step 2: Hover over the site name, and click the 3 dots that appear on the right

    Step 3: The left pane should expand and show the Create pane. in this new pane, click 'Collection Cards'

    Step 4: Enter a name for your collection of cards, for example: Insurance Products. Click Save and Publish and then Navigate away and back to the page.

    Step 5: Once back on your Collection Card, Click Create Collection Card and give the card a name. This will be the name you look for when you want to add it to the site

    Step 6: In the Contents, fill in each section where applicable. you might not need something in each one. Title should be relevant to the content of the card, e.g. for Insurance Products you might create a Car, Home or Pet Insurance card.

    Step 7: Click Save and Publish

    Step 8: Use the small back arrow next to the Header, to go back to the Collection.

    Step 9: You should now see that Card you just created listed as a card in your Collection. instead of the “No items” you had before.

    Step 10: Repeat Step5 - 8 For as many cards as you would like to be displayed on the site.

    Good Tip: Create Cards that you will use across your site, because the cards can be used on other pages across the site

    Step 11: Navigate to the page you want to add the Collection Cards to, using the left hand pane. and in the area you want to have the collection card, add a section block.

    Step 12: Within that section block, the layout block you need to select must be a One Column Block, as the collection cards take up the entire width of the page. the option to add the Collection Cards also won’t appear on any other selection. So, One Column Layout Block has to be selected.

    Step 13: Click Add Content in the One Column block, this should open the right hand pane, and under Content Blocks click Collection Cards.

    Step 14: The Collection Cards Content Pane should now be displayed, and when you click Add, navigate to the Collection Cards you created. click the small triangle arrow next to the collection cards you created and it should open up the folder for you to select the cards you want to add to the page. Select the ones you want and then press submit.

    Step 15: Click Create in the bottom right, and then Save and Publish to make them visible on the page.

    You’ve successfully added Collection Cards to your page! Note: their appearance depends on the Theming currently applied to the site.

  • Accessibility