Cards

Cards are a fundamental design element in modern web interfaces, offering a structured way to display information. In wp-lemon, we’ve streamlined their implementation to make them highly flexible and customizable. Whether you're showcasing content, media, or structured data, cards provide a visually appealing and consistent way to present information.

This documentation will walk you through the types of cards available in WP-Lemon, how they function, and how you can create and customize your own.

Different type of cards

Within wp-lemon you'll come across two types of cards. In wp-lemon, there are two primary types of cards: content cards and post cards. Each serves a different purpose and behaves differently in terms of data retrieval and presentation.

Content cards are Gutenberg blocks and are used to display content that is not directly related to a specific post type, such as text, images, or other media. These cards live on their own within the content area of a post/page. Post cards, on the other hand, are generally used in queries to display the result of the different items in that query. These can be news items, pages, FAQs, persons or any other custom post type your project needs.

In wp-lemon, we have a few default cards available for you to use. These cards are designed to be flexible and customizable, allowing you to easily create your own custom cards as well. In this documentation, we'll explain how to use the default cards, how to create your own custom cards, and how to customize the card settings to fit your needs.

Default content cards

Content cards are basically custom blocks that behave like cards. Instead of being tied to a specific post type, they pull their data dynamically from Advanced Custom Fields (ACF). In WP-Lemon, we have a few default content cards available for you to use. These cards are designed to be flexible and customizable, allowing you to easily create your own custom cards as well.

The default content-cards we have available are:

• Content card: The content card is your most basic card. At the very minimum, it will display the title and the content of the post. Although, you can also add an image and a link to the card.

• Image-overlay card: The image overlay card is a card that displays an image with an overlay. This card can be very useful for displaying images with text or other content on top of them.

• Price card: The price card is a card that displays a price or a price tier. This card can be very useful for displaying prices for products or services.

Default post cards

In wp-lemon, we have a few default post cards available for you to use. These cards are designed to be flexible and customizable, allowing you to easily create your own custom cards as well. The default post-cards we have available are:

• Faq card
• Job card
• News card
• Person card

To give you an idea of what these cards look like, here is an example of a news card without any customizations:

So how does it work when I want to make my own custom card?

There is a slight difference in how you would overwrite the default for content cards and post cards. Which will be explained below.

Custom content cards

Because content cards behave as custom blocks, you can just easily create your own custom card by creating a new custom block. To do this simply follow the documentation on how to create a custom block in wp-lemon.

After following the create-block documentation there are two essential steps you need to take to make. At the top of your twig file:

Step 1: Extend the crd-wrap.twig file.

Step 2: Define the card-type that you're trying to overwrite.

This will look something like this:

Copy
{% extends 'components/cards/crd-wrap.twig' %}
{% set card_type = 'content' %}

This will make sure that your custom block is recognized as a card and that it will be displayed as such.

you can easily create your own custom card by creating a new block in the resources/views/components/cards/ directory.

Post cards

To overwrite one of the default post cards, navigate to resources/views/components/cards/ and create a new file named crd-POSTYPENAME.twig, where POSTYPENAME is the name of the post type you want to create a card for. Make sure that the POSTTYPENAME is the same as the post type you want to create a card for. For example, if you want to create a custom card for the news post type, you would create a file named crd-news.twig. When this file is created, follow the same steps as with the content cards above.

Step 1: Extend the crd-wrap.twig file.

Step 2: Define the card-type that you're trying to overwrite.

This will look something like this:

Copy
{% extends 'components/cards/crd-wrap.twig' %}
{% set card_type = 'content' %}

Making best use of the default cards

Every card extends the components/cards/crd-wrap.twig file. This file is used to wrap the card and contains the default card structure. We highly recommend taking a look for yourself to see how the default card is structured and get a rough understanding of how it works. Right now we'll give you a quick overview of how the card-wrap is structured and how you can use it while creating your own custom cards.

In the card-wrap.twig file there are a lot of settings predefined. Below is a overview of all those settings, and how you can overwrite them to customize the card to fit your needs.

A quick overview of some of the settings we predefined for you that you could use in your custom card:

Besides the settings above, the card-wrap is build out of blocks that are used to display the content of the card.

The following blocks are available to overwrite in the card-wrap.twig file: