Resources Card

OutSystems
1

Resources Card:
This card is used as part of the templates related content and resources listing.
Consists of a cover image, logo, tag, title, description and link.
When used in the templates, the link is replaced by the call to action component.

Event Card :
This card is used to promote events.
Consists of a cover image, logo, tag, title, subtitle, description, link and can have a sponsor logo.
When used in the templates, the link is replaced by the call to action component.

If there is a need to use it, contact the development team to analyze the possibility of making it a component.

Libraries

Bootstrap

HTML Code












How to Implement

This element is not a component and to use it in a specific layout it is necessary to use the plain html component.

The card will be the same width as its parent element and there are five possible layouts:

  1. Vertical (default)
  2. Horizontal : add class is-horizontal to card-resources div
  3. Highlight: add classes is-horizontal and double-size to card-resources div.
  4. Event: add class card-resources__event to card-resources div
  5. Event with Sponsor: add class card-resources__event-logo to card-resources div

In all the layouts the link that surrounds the image must contain an aria-label indicating what that link is about and the logos must contain a alt with the description of the image.

The structure of the event card differs from the other cards in the content zone. 

The tag and link elements are independent and their styles depend exclusively on the associated classes.

To change its layout replace the os-tag, os-tag__overlayed, os-tag__no-hover and external-link classes with the Outsystems style guide classes for tags and links.

Tasks Front End

DMW-398 DMW-735 DMW-1073 DMW-1307

Tasks Back End

DMW-1406

Tasks details

DMW-398 DMW-435 DMW-449

Views Path

This card is used as part of the templates related content and resources listing:
/Views/Resources/ResourcesComponent.cshtml
/Views/Resources/ResourcesComponentLateral.cshtml
/Views/Resources/ResourcesComponentResults.cshtml

Component Variations

Vertical card (default)


Title Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere, ipsum nec semper lacinia.

How to use


This element is not a component and to use it in a specific layout it is necessary to use the plain html component.

The card will be the same width as its parent element.

Horizontal Card


Title Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere, ipsum nec semper lacinia.

How to use

This element is not a component and to use it in a specific layout it is necessary to use the plain html component.

The card will be the same width as its parent element.

To change the default layout to horizontal it is necessary to add class is-horizontal to card-resources div .

When used in the vertical related content template the tag and logo are aligned to the center of the image.

Highlight card


Title Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere, ipsum nec semper lacinia.

How to use

This element is not a component and to use it in a specific layout it is necessary to use the plain html component.

The card will be the same width as its parent element.

To change the default layout to horizontal it is necessary to add classes is-horizontal and double-size to card-resources div .

Below 992px this card will have the same layout as the vertical card.

Event card


How to use

This element is not a component and to use it in a specific layout it is necessary to use the plain html component.

The card will be the same width as its parent element. It is necessary to add class card-resources__event to card-resources div .

Event Sponsor card


How to use

This element is not a component and to use it in a specific layout it is necessary to use the plain html component.

The card will be the same width as its parent element. It is necessary to add class card-resources__event-logo to card-resources div .

Undeveloped Options

NA

Example page

Figma Link