Card
A Card is a popular UI design using in modern day web design. Cards serve as entry points to more detailed information. While not strictly tied to a specific HTML element, they often resemble a rectangular box with a combination of images, text, and possibly some action elements.
Introduction
The design system defines a card as an enclousure of content, which usually appears as a rectangular shape that elevates (through shadows or other visual cues) from the page or background. You can wrap any content in a card, but here is what you must know about it first.
- A skeleton card is essentially a
` <div> `that must have a rounded border of 1 rem (16px), can reduce to 0.75 rem on tablets and smaller desktop screens and 0.5 rem on smaller devices. - If your layout does not use spacing between grids, and the cards are stacked, each card must have an inner padding of 1.5 rem (24px)
- When a card is stacked, the elements that join it’s borders must not be rounded.
- Cards may have a border, be completely coloured, be used to encapsulate any content and can be used to display any logical information that must be represented within it.
Anatomy of a stacked card
When cards are stacked next to each other with no gap, the rounded corners must only exist on the edge of the group. A stack of cards are useful when displaying statistics or information that is relative to each other. They are also useful when used with a border. Here is an example
Anatomy of a matrix card
When cards are stacked as a matrix, to form a grid, only the edges must be rounded.
Anatomy of cards with a gap
Adding a glow
You may add a shadow - or a glow - to the card as a hover effect. Implementing a shadow on however is a choice, and recommended with the entire card element is clickable. Using shadows on hover is a great visual cue.
You may add a glow to any card that is bordered.
<div class="aegov-card card-bordered card-glow"></div>
To override the glow colour, you may add the colour matching your border with the opacity filter. This would give a consistent colour shadow to your card. The default shadow is the shadow of the default border colour. View the News media card - with border to understand how the border and glow have been overriden.
<div class="aegov-card card-bordered card-glow !border-aeblack-100 !shadow-aeblack-200/20"></div>Elements of a card
Media card
The media card includes an image instead of the default icon usage. The image is encapsulated within the card border and will also have a padding which is the default padding of the card. It is recommended to apply a rounded border on the image
Always ensure that the image used within a stack of cards is consistent in it's height and width.
News media card - without border
Most websites built by federal government entities will include news, press releases, events, blogs ... etc. The card is an excellent approach towards displaying the content for such content. The following is an example of a news media card that includes - an image, a date, a category, a title, a short description and a link to the article itself.
This variation has no hover effect on the card, but rather only affects elements where the link is placed.
News media card - with border
The news media card with a border encapsulates the news content within a bordered card, but allows the image to be edge-to-edge to the card. This variations also includes a hover effect on the entire card.
Service card
Service cards can be used to display a call to action to a particular service page. This variation will not include any image, but rather have 2 seperate links within the same card. One link will point to the service page - which will describe the service procedure and requirements, while one will point to the ability to directly start the application for a service.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
إصدار شهادة براءة ذمة
من خلال هذه الخدمة يمكن للأفراد والشركات والمؤسسات التجارية طلب إصدار شهادة براءة ذمة من المخالفات المرورية
ابدأ الخدمةAll components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Behaviour
A card does not have a default behaviour. It is essentially a container that holds content. The design system recommends the following behaviour on a card element.
- Aim to add a glow on media cards where majority of the content is clickable.
- Ensure the card is always rounded, and the border radius reduces on mobile devices.
- Always include padding between elements - where the minimum padding between any element is 24px.