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
Size of a card
The default size of the card is the ` base ` size. Variations in size are allowed for 3 types:
| Class | Properties |
|---|---|
card-lg |
To be used when container is "2xl"
|
card-base |
To be used when containers - "md", "lg" and "xl"
|
card-sm |
To be used for containers below "md"
|
The large card size variation
The title of the card
The description of a card, and this may be variable based on the device or width of the viewport.
The base card size variation
The title of the card
The description of a card, and this may be variable based on the device or width of the viewport.
The small card size variation
The title of the card
The description of a card, and this may be variable based on the device or width of the viewport.
Similar to all components, the variations on the size can be applied on the card component using the responsive variants of TailwindCSS. Hence, you may use ` <div class="aegov-card card-sm md:card-base 2xl:card-lg"> ... <div> to have the card component be responsive to the device width.
The size variation is applicable to all types of cards available in the design system and listed here.
Type of cards
There are a number of variations to the look of a card that can serve multiple purpose on the website. Listed below are the most common types of cards you may use. However, if you follow the anatomy of a card, you may choose to create a card with content that may be specefic to your requirement.
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.
Creative card
The creative card is a great way to display an image based card with the title itself being call to action. This gives this card the ability to be encompass an image as the visual element of itself.
Image on left
The "Image on left" card is a versatile component designed to pair a visual element (image or media) on the left with structured content on the right. This layout emphasizes both imagery and text, creating a balanced visual hierarchy. The card is perfect for showcasing content like event details, product highlights, or informational snippets, where the image acts as a focal point, complementing the accompanying text.
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.