Smart cards

Smart cards allow you to insert dynamically-updated, reusable cards into a page and signpost to their source pages.

Off

Who can use these Components?

  • Group Admins, Group Owners and Group Editors (insert a card).

Why should we use Library components?

To avoid duplicate content, reduce Competition and Markets Authority (CMA) risks and promote reusable content. Smart cards offer a presentable and user-friendly way to link to source content.


Course

When?

Used to display information about courses at a glance, and then link to the source course pages. The entire card is clickable.

How?

  • When using the Editor, select the Smart card (Course) button. Tip: hover your mouse over the buttons to find the right one.
  • Search for and select the course you want to embed. For undergraduate courses, search using the UCAS code. Click Next.
  • Click Embed.

News story

When?

Used to display a teaser view of a news story into a page on your own website. The entire card is clickable.

Why?

When you need to reference one or more news stories on your page and present a user-friendly way to link to source content.

How?

  • When using the Editor, select the Smart card (News story) button. Tip: hover your mouse over the buttons to find the right one.
  • Search for and select the news story you want to embed. Click Next.
  • Click Embed.

    Staff profile

    Teaser view

    When?

    Used to display a teaser view of a Staff profile on a page on your own website. Telephone numbers and email addresses are clickable; other areas of the card link through to the profile itself.

    Why?

    The embedded teasers are helpful for a visitor who is interested in finding out more about a member of staff mentioned in the article. For example, in a News story.

    How?

    • When using the Editor, select the Smart card (Student / Staff profile) button. Tip: hover your mouse over the buttons to find the right one.
    • Search for and select the Staff profile you want to embed. Click Next.
    • Click Embed.

    Student profile

    Teaser view

    Card view 

    When?

    Used to display a brief introduction to a student and then link to their complete profile. The entire teaser and card are clickable.

    How?

    • When using the Editor, select the Smart card (Student / Staff profile) button. Tip: hover your mouse over the buttons to find the right one.
    • Search for and select the student profile you want to embed. Click Next.
    • Select how to display the profile, either Card or Teaser.
    • Click Embed.

    Event

    Teaser view

    Card view

    When?

    Used to display a teaser view of an Event on a page on your own website. The event title, image, date and location are displayed and the entire teaser or card is clickable.

    Why?

    Use events smart cards to:

    • Curate events listing pages consisting of upcoming events. Automated event listing pages are not currently available. Example event listing page.
    • Reference one or more events on a page, linking to the source content in a practical and user-friendly way.

    How?

    • When using the Editor, select the Smart card (Event) button. Tip: hover your mouse over the buttons to find the right one.
    • Search for and select the event you want to embed. Click Next.
    • Select how to display the event, either Card or Teaser.
    • Click Embed.

    Component from library

    When?

    Used to display the same piece of content on multiple pages eg a promotion box embedded into the body content of a page. The entire card is clickable. The range and types of available content to embed via the Component library will increase over time.

    Component from Library Popup

    How?

    • When using the Editor, select the Smart card (Component from library) button. Tip: hover your mouse over the buttons to find the right one.
    • Choose a tab to filter available Components. These vary depending on where you intend to insert it. Select to search from either your own (1) Editor library (Components used just exclusively on your own website) or the Central library (Components used across all University of Sheffield sites).
    • You can filter the available Component types shown by clicking on the (2) Paragraph drop-down and select the type you require. Leave it with the default selection to show all components.
    • If your required component doesn't appear on the first page of results then use the (3) Page navigation to see further pages of components. Tick your required Component's (4) checkbox. Next, click (5) Select Component.
    • Click Embed.

    Get in touch

    If you have CMS questions or are stuck then get in touch and we'll do our best to help.