Cards

Overview

Cards are versatile UI components that serve as containers for various types of content. They provide a consistent and visually appealing way to present information, images, and interactive elements. Cards are widely used in web and mobile design to organize content, improve readability, and enhance user experience.

Our card system is divided into two main categories:

1. Static cards: These are versatile, general-purpose cards that can be used for a wide range of content. They offer flexibility in design and can be easily adapted to various use cases.
2. Specific content cards: These are tailor-made cards designed for particular types of content. Each specific content card is optimized for displaying and organizing information related to its designated content type, such as news, articles, events, or videos.

This dual approach allows for both flexibility with static cards and specialized presentation with specific content cards, ensuring that different types of information can be displayed in the most appropriate and effective manner.

Static cards

Static cards are the foundation of our card system, offering a versatile and adaptable design that can accommodate a wide range of content types. These cards are characterized by their flexibility and can be easily customized to suit various needs across different sections of your website or application.

These static cards are designed for general-purpose use, offering flexibility and adaptability for various content types. However, for specific content types, we recommend using the specialized content cards that are tailored to present particular information more effectively.

Static cards are ideal when you need a versatile container that can be easily customized to fit different scenarios. They provide a consistent look and feel while allowing for variations in layout, content, and styling.

Below are examples of different static card variations that showcase their adaptability and range of use cases:

Default

Category

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Internal link

No border

Category

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Internal link

Background

Category

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Internal link

Background dark

Category

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Internal link

Overlay

Category

Card title

26/06/2020

Horizontal

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Internal link

Specific content

Specific content cards are designed to present particular types of information in a structured and visually appealing manner. These specialized cards cater to different content types, such as articles, audio, blogs, e-learning materials, events, news, partner information, and photo galleries.

Each specific content card is tailored to highlight the most relevant information for its content type, ensuring that users can quickly grasp the key details.

By using these specialized cards, you can create a more engaging and informative user experience, tailored to the specific content you're presenting. The following examples demonstrate various specific content card types:

Article

Article

Card title

Rome, Italy 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

Internal link

Blog

Blog

Card title

Rome, Italy 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

Internal link

E-Learning

E-Learning

Card title

Rome, Italy 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

Internal link

Event

Live

Event

Card title

Rome Time 26/06/2020

Event location

Card title

Rome Time 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

News

News

Card title

Rome (Italy) 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

Internal link

Partner

Photo Gallery

Photo Gallery

Card title

Rome, Italy 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

Internal link

Publication

Publication

Card title

Rome, Italy 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

Internal link

Speeches

Speeches

Card title

Rome, Italy 26/06/2020

Some quick example text to build on the card title and make up the bulk of the card's content.

LoremIpsumLorem ipsumLoremIpsum

Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,

Internal link

Story

Story

Card title

Rome, Italy 26/06/2020

Social Media

Social media cards are visual components designed to showcase content from various social platforms in a compact, engaging format. By incorporating platform-specific design elements and functionality, social media cards enhance user experience and encourage interaction with the displayed content.