Cards

Panel settings

The cards panel may look a little complex at first but it is quite a simple panel. The top options define what type of panel you want to display, give it a title, and choose some styling / colour options. After that you are just adding rows like you would for a slider, accordion, etc.

• Card type – The primary dropdown which will affect which option you seen in the ‘Cards‘ section
  • Image card – standard – Here you can select an image, apply a link, and some text. The link field is required and will show as a bold title underneath the image along with a right facing arrow. The text is used as a description of the content you are linking to.
  • No image – standard – This is the same as the image card, but without an image!
  • Image card – list – This is very similar to the image card except that instead of the link and text fields you can add a card title and a list of links. This is useful when linking to multiple pages related to a project or school
  • No image – list – Surprise surprise this is the same as the image card – list but without the image!
  • Book covers – This card type operates the same as the image card except it is designed to accommodate larger images, in usual book cover proportions
  • Video card – This is very similar to the image card except that you are pasting in the URL for a YouTube video, and if supplied including a URL and associated text for a transcript file.
  • Icons – Here you can choose an icon, apply a link and some text. The link and text options are optional. Click here to see a list of all available icons. To use an icon just type in the name to search or select from the dropdown list.
• Panel title and description
  • Title – The title for the panel which appears above the cards themselves
  • Description – Additional descriptive text which appears below the title
• Panel background
  • Panel background – Default colour options for the panels background as found on other panels. NOTE! You can now select an image for the card panel background.
  • Make background transparent – By default all cards have a white background to them. This option removes that and where on a darker background will make the text white
    If you choose image:
  • Background image – Standard image field allowing you to choose your desired background image
  • Colour overlay – Select which colour you want to overlay onto the image
  • Image brightness – Changes the opacity of the image in the background. Lower the value to make it more transparent, resulting in a softer image
  • Make title and description white? – As it says, toggle this to make the text white. Helpful with darker background
• Panel options
  • Search field and Category / Tag filtering dropdowns – When switched on additional options are provided to allow people to search against the cards, as well as filter by categories and tags. The categories and tags are free text fields which appear on each card allowing you to put in whatever you wish.
  • Responsive cards – This allows the cards to to responsively fill the row. Works best if you only have 2 or 3 cards on a panel.
  • Center align panel title & description? – Centre the title and description if used
  • Center align cards on page? – Center all of the cards on the panel. Affects rows with less than 4 cards
  • Center align card title and text? – Centers the content on the cards
• Cards – This is the main section where you can add cards to your panel. To add a card just click the ‘Add card’ button and a new row will appear showing you all of the options available to you for that type of card. Note, if the title for that column has a red asterisk then it is a required field.
• Search and Filtering options (Only if you turn this on within the panel options tab)
  • Show search field – Adds a search field to the panel
  • Show categories dropdown – Adds a dropdown showing all categories used on the cards
  • Show tags dropdown – Adds a dropdown showing all of the tags used on the cards
  • Category pre-set – Here you can pre filter the cards by one of the categories you have used
  • All categories label – You can change the wording on the dropdown instead of ‘categories’ if required
  • Show categories on card – You can choose to hide the categories from being displayed at the bottom of the card
  • Tag pre-set – Here you can pre filter the cards by one of the tags you have used
  • All tags label – You can change the wording on the dropdown instead of ‘tags’ if required
  • Show tags on card – You can choose to hide the tags from being displayed at the bottom of the card

Examples