Skip to content

Horizontal Card

Horizontal Card is used to display a preview of news, pages or documents in a large card.

Horizontal Card

Managed Properties

  AuthorOWSUSER
  CommentCount
  Description
  DocumentLink
  FileExtension
  GeoLocation
  LikesCount
  MDCListTitle
  MercuryArticleDateOWSDATE
  NormSiteID
  owstaxIdMercuryBusinessUnit 
  owstaxIdMercuryCategory
  owstaxIdMercuryDepartment
  Path
  ParentLink
  PictureThumbnailURL
  PromotedState
  SiteID
  SiteTitle
  SPSiteUrl
  Title
  UniqueID
  WebId
  ViewsLifeTime

Note

NormSiteID, WebId and UniqueID are required for the article preview image, when returning home pages PictureThumbnailURL is used.

When searching for documents additional managed properties are required:

MDCTitleOWSTEXT
FileExtension

Slots

Slot Managed Property
Title Title
Description Description
User AuthorOWSUSER
Date ModifiedOWSDATE
Geo GeoLocation
Ciews ViewsLifeTime
Likes LikesCount
Comments CommentCount
Location MDCListTitle
Tags owstaxIdMercuryCategory
BodyTags owstaxIdMercuryDepartment

Note

Slot values can be removed or changed to display a prefered managed property in the slot.

Configuration

  • Preferred Items Per Row
    • Set the number of items you'd prefer to see per row
    • This preferential figure is subject to change depending on screen size i.e mobile users will likely see less than the setting
  • Extra Gap Between Items
    • Set the additional gap between items.
  • Hide Image
  • When enabled hides the image on the template.
  • Enable Follow Items
    • Allows the user to favourite/ follow the item.
  • Title Lines to Show
    • Set the number of lines of the title to be display before truncating
  • Background Colour
    • Sets the background colour.
  • Override Date
    • When enabled set the date format using luxon formatting, for example 'dd MM yyyy' would format to 01 01 2024.
  • Elavation
    • Sets the amount of box shadow applied on each item.
  • Header Font Colour
    • Sets the font colour of the header.
  • Description Font Colour
    • Sets the font colour of the description.
  • Site Title Font Colour
    • Sets the font colour of the site title.
  • Newspaper Font Colour
    • Sets the font colour of the newspaper icon.
  • User and Date Font Colour
    • Sets the font colour of the user and date.
  • Tag Headings Font Colour
    • Sets the font colour of the tag text.
  • Interaction Font Colour
    • Sets the font colour of the footer items.
  • Tags Label
    • Sets the label to describe the tags.
  • Body Tags Lael
    • Sets the label to describe the body tags.
  • No Tags Label
    • Sets the label when there are no tags.
  • Number of Tags to Display
    • Sets the number of tags to display before overflow.
  • Use Theme Primary for Tag Background
    • When enabled use theme primary for the tag background colour, use the custom background colour picker when disabled.
    • When show tags as text is enabled this will be the font colour property to ensure the tag colour can be consistent for tags and body tags.
  • Use theme for tag font
    • When enabled use theme body text for the tag font colour, use the custom tag font colour picker when disabled.
  • Show tags as plain text instead of tag boxes
    • When enabled tags display as comma seperated plain text list.
  • Show body tags as plain text instead of tag boxes
    • When enabled body tags display as comma seperated plain text list.

Swapping Geo Value

When Geo is displayed on a template, the value of this may not be best represented to what the Geo location is. The value can be updated in the custom branding file using the css below:

Hides Current Value 

.mercury-geo-{Geo Value}[data-geo*="{Geo Value}"] span {
  display: none;
}

Sets New Value 

.mercury-geo-{Geo Value}[data-geo*="{Geo Value}"]::before {
  content: '{New Geo Value}';
}