Custom Components

Find all (currently) available LEANability Custom Components. These components are build on top of the WordPress Gutenberg Editor. They are special for LEANability. If you need more Components – which makes your live easier – just let me know.

Cards

Cards are simple Wrapper-Components to structure your content on a page. In generell you can use every element inside a card. But: make sure you apply distances between the elements. Use the css-classes for “margin-bottom”. It is recommended to use mb-10 for inner blocks.

Media and Content

This is the Block “Media and Content” placed inside of a card. As you can see, the block appears as card. It uses simply a headline, a paragraph and one image.

See some examples below.

My awesome Card-Style

Feel free!
Try something

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

Action Cards

“ActionCards” is a type of the “DefaultCard”. These card is predefined with a template. It uses always:

– 1. Headline
– 1. Text/Description
– 1. Call-to-action Button

The amazing action card

This is the Content/Description of the amazing ActionCard.
You can find these component in the Block-Editor in “Generell Blocks”.

This is the action button

Card in a box

This card is in a box. Clean and consistent for all viewports and screen-sizes. The ActionCard supports also lazy-loading of images.

Buy a card

Another card in a box

The text of this card is shorter, but they are still at the same height.

Smaller Card

To create the effect of equal height cards, simply add the css-class “h-full” to each card. The will expand to the longest card, and the Call-to-Action Button is always placed on the bottom of the card.

Speaking List

This component is very special. It shows a list of items in the style of a “Star Wars” Trailer. The SpeakingList was build for the Speaking-Page to present a list of recent events, but it can also be used independently for other use-cases. Find the “SpeakingList” Component is also in “Generell Blocks”