Umbraco Backoffice Documentation

Game Cards

List of game cards with an image and a link to a game page. The Game Cards page component cards fill the width of the containing layout column.

Game Cards in One Column layout

Game Cards in Two Column Asymmetric layout

Game Cards in Two Column layout

Content

Game Cards page component has one mandatory content parameter:

Game Cards

List of game cards which can be built using Game Card Items. It needs a minimum of one and unlimited maximum number of Game Card Items.

Game Card Item

Game Cards building element which has two mandatory content parameters:

  • Picture - a Picture element which is displayed on the game card. Image supports a variety of media formats and image transparency. Also, it is very important to add a detailed image content description for the website to be accessible.
  • Link - a URL to another page or website, preferably a game information page.

Also, it has one setting:

  • Hide - hides the element in Game Cards component.

Settings

Game Cards page component has the following settings:

  • Hide - hides the component.
  • Details Button - adds a details button on the bottom right hand side of the game cards.
  • Mobile Content Scroll - places all the cards in one row and makes the Game Cards container scrollable on mobile devices (device width less than 992px).
  • Card Size - sets the size for the game cards.

Details Button

Toggling this setting will add a details button on the bottom right hand side of the game cards.

Mobile Content Scroll

Toggling this setting will place all the cards in one row and makes the Game Cards container scrollable on mobile devices (device width less than 992px). The Game Cards will look the same on desktop and tablet devices with or without this toggle active.

This setting is very useful to prevent the page on mobile devices being too long when there are a lot of game cards on the page. The setting will only be active if there are at least 3 elements in the block.

Card Size

Sets the size for the game cards. Game cards size is different on different layouts, thus, the examples below showcase how the game cards size changes and how many game cards fit in a single layout column row of various layouts.

One Column layout

Table below displays how many different size game cards fit on various width devices in a single layout column row in One Column layout.

  >1400px 1399px - 1200px 1199px - 992px 991px - 768px 767px - 576px <575px
Small 4 4 4 3 3 2
Medium 3 3 3 2 2 1
Large 2 2 2 1 1 1

Small Game Cards in One Column layout

Medium Game Cards in One Column layout

Large Game Cards in One Column layout

Two Column layout

Table below displays how many different size game cards fit on various width devices in a single layout column row in Two Column layout.

  >1400px 1399px - 1200px 1199px - 992px 991px - 768px 767px - 576px <575px
Small 2 2 2 2 2 2
Medium 2 2 2 2 2 1
Large 1 1 1 1 1 1

Small Game Cards in Two Column layout

Medium Game Cards in Two Column layout

Large Game Cards in Two Column layout

Two Column Asymmetric layout

Table below displays how many different size game cards fit on various width devices in a single layout column row in Two Column Asymmetric layout. Game Cards are only available in the bigger box of Two Column Asymmetric layout.

  >1400px 1399px - 1200px 1199px - 992px 991px - 768px 767px - 576px <575px
Small 2 2 2 3 3 2
Medium 2 2 2 2 2 1
Large 2 2 2 1 1 1

Small Game Cards in Two Column Asymmetric layout

Medium Game Cards in Two Column Asymmetric layout

Large Game Cards in Two Column Aymmetric layout

Previous section:

Cards

Next section:

Content Columns