Card Layouts

Cards are UI elements that display content in a structured format, often used to showcase information.

Basic

Carded Components

This is an example of an extremely basic card component. It includes a basic heading and body text. As you scroll down you will begin to notice the versatility of each card increases. Including buttons, badges, icons and images.

Carded Components

Action Buttons

Carded Components

Whilst still being an extremely simple example of a card component, this one includes some action buttons in which you can utilise to navigate users to other content throughout your site. You will also notice that the buttons included within the card are the Button components listed under the UI elements of Framerblocks, allowing for your personal styles to be consistent across all pages.

Submit

Carded Components

Submit

Article

13 April, 2023

Design

Carded Components

This card is a further adaptation of the basic card, including the same buttons as above but now replicating a card similar to that of an article advertisement. Including a badge at the top right and a date component. This is ideal for advertising a CMS article for example.

Submit

Image

Orange Juice!

Whilst still being an extremely simple example of a card component, this one includes some action buttons in which you can utilise to navigate users to other content throughout your

Submit

Orange Juice!

Whilst still being an extremely simple example of a card component, this one includes some action buttons in which you can utilise to navigate users to other content throughout your

Submit

Image Article

13 April, 2023

Design

My Kitchen

This card combines the article card with the image card, presenting the same opportunity as an article advertisement, this time allowing you to add an image to match the text content. The layout changes depending on the screen size of the viewer

Submit

13 April, 2023

Design

My Kitchen

Submit