Skip to content

The card slider is a carousel-type component that displays a series of the Card Slider Card content entries. See the Our Institutes slider on the homepage for an example.

These sliders can contain:

  • a selection of up to 6 x Card Slider Cards

  • a Card Slider View is a way to create a fixed set of Card Slider Cards that can be added quickly to multiple pages.

The Card Slider is for use on landing pages only.

How to build a Card Slider

View all Close all
Build a Card Slider Card

To create a Card Slider Card, open the content entries section of the CMS, click New entry and select Card Slider Card.

card slider card

  • Card reference name: this is the title for the card in the CMS

  • Card type: Manual Content allows you to build a card, otherwise you have the option to display a News Article or Event.

  • Card heading.

  • Card description.

  • Thumbnail: this image needs to be 600 x 400px.

  • CTA link:

    • link text: this is the text that appears as a link under the card description

    • internal link path: include the URL of a page on the St George's website

    • external link URL: include the URL of the external page you're linking to.

  • Select News Article/Event: select a news article or event if you checked either option in the Card type section.

Build a Card Slider View

Open the content entries section of the CMS, click New entry and select Card Slider View.

  • Card Slider Text: this is the text that appears on the left-hand side of the Card Slider.

  • CTA link:

    • link text: the text that appears a link under the Card Slider Text

    • internal link path: insert the URL of the St George's website page you're linking to

    • external link URL: insert the URL of the external page you are linking to.

  • Background image: this image appears behind the cards you're adding.

  • Select cards for slider: here you can pick the Card Slider Cards you've already built, or build them straight into the Card Slider View by selecting Create a new card slider card.

card slider view

Add the Card Slider to your page

To add the Card Slider to your page, drag the Card Slider icon and drop it onto your page  then right-click on the blue box and select Webcontrol properties.

Manual Cards
Use this tab to compile a set of Card Slider Card entries manually.
  • Text: the heading to appear on the left-hand side of the slider. 

  • Link text: the text that appears as a link on the slider.

  • Link: the URL of the page you're linking to. If you're linking to a page on the St George's website, click on the blue button and select the page from the folder tree.

  • Background image: this is a slightly opaque image that appears behind the cards.

  • Card slider card: use the green button to add cards to the slider, then search for the Card Slider Card entry from the dropdown that appears. You can select up to 6 cards. 

Card Slider View

 Use the dropdown menu to search for the Card Slider View you've built.

An example of a Card Slider

card slider Each institute here is a Card Slider Card, and links through to the relevant section of the website.

 

 

Find a profileSearch by A-Z