Direct children as cards

Using this component

Do

• Add this component to standard and landing pages to help users navigate through pages within a section of the website. 
• Use to manage content and keep navigational cards up-to-date. The component's cards automatically update as child pages' titles or headings change or child pages are added or removed, making it a useful content management tool. If you don't want this function, consider using the standard cards component instead.
• Continue to monitor your page and ensure that the correct information is being automatically populated from the Direct children as cards component. 

Don't

• Allow more than 12 cards, although it's recommended to use fewer. You should monitor this component and may need to remove it and use a combination of other components, such as links lists and standard cards to meet this requirement.
• Add the 4 cards wide variant to a 3/4 width section. The 4 cards width variant should only be used in a full width section. 

How to add this component to your page

You can add Direct children as cards to either a standard page or a landing page. 

To add to a standard page

1. Go to the Edit screen of your standard page and scroll down to the Add block button.
2. There is a drop down arrow on the Add block button. Click the arrow to expand the drop down options in the Add block button and select Custom block.
3. The Custom block will be generated. By default the Type will be set to Advanced block. You can leave this setting.
4. In the Plugin dropdown, under the Navigation heading select Direct children as cards.
5. In Column layout use the drop down to select either 2 or 3 cards across. 
6. In Entity select Entity from route for the child pages of the page you are editing to display as cards. 
7. Scroll to the bottom of the page and click the Save button.

To add to a landing page

1. Click Add block, in your Layout screen. 
2. Use the Filter by block name search field and type Direct children as cards, then select it from the search results.
3. You can leave the default Title as this won't be visible publicly. 
4. Choose your Column layout. Consider the width of the section you're adding it to and how it will display best. The most frequently used layout is 3 cards per row. The 4 cards wide variant should only be used in a full width container.
5. In the Entity field select Content. 
6. Click the Update button. 
7. Click the page's Save layout button. Only after you save the layout will you see the block properly generate the Direct children as cards. 

How this component displays

2 across cards in 3/4 width container

3 across cards in 3/4 width container