Enable texteditable
Cards Section
Use cases

Use for displaying short pieces of stand-alone content, such as benefits (discover, enhance, monitor), locations (Pristina, Munich, New York, Tokio) or other information that fits into the cards format.

The card image, description, and link are all optional. You can add unlimited number of cards.

Card image supports displays options for photos, illustrations and icons.

View all variations
Options
Click for preview
Theme UI
Base Theme
Image Fitting Options
Validations
All fields not marked required are optional
Deep link
Only Deep link
Cards (required)
One or many Card Component
Image
Min width 768px
Min height 768px
Link
Only Deep link, Link
Buttons
Less than 2 Deep link
Sections Overview

Sections Overview

Explore examples of using the sections and their variations.

Inline Components

Inline Components

See how inline components can be embeded in different cases.

Guides FINAL

Guides

Read the guides on how to use components in Contentful.

Cards Section
Use cases

Use for displaying short pieces of stand-alone content, such as benefits (discover, enhance, monitor), locations (Pristina, Munich, New York, Tokio) or other information that fits into the cards format.

The card image, description, and link are all optional. You can add unlimited number of cards.

Card image supports displays options for photos, illustrations and icons.

View all variations
Options
Click for preview
Theme UI
Base Theme
Image Fitting Options
Validations
All fields not marked required are optional
Deep link
Only Deep link
Cards (required)
One or many Card Component
Image
Min width 768px
Min height 768px
Link
Only Deep link, Link
Buttons
Less than 2 Deep link

Browse Components

advanced-list-section --gradient 1

Advanced List Section

The list can be used for job posting, events, meetings etc. Extend the list to show more information and use buttons for primary & secondary actions.

agenda-section --gradient 1

Agenda Section

Display timetables & agendas of any kind. Use it for one or multiple days agendas. Timeslots can use different time formats & more information can be shown.

app-section --gradient 1

App Section

The App Section can only be used to direct visitors to download apps from Google Play or App Store. You can use one or both stores. Image should preferably be a screenshot of the app.

article-section --gradient 1

Article Section

Perfect to display legal terms, privacy policies, blog articles and other longer texts. Optimized for readability of longer content & supports all markdown options.

cards-section --gradient 1

Cards Section

Use it to show short pieces of stand-alone content, such as benefits, locations or other information that fits into the cards format. Add unlimited number of cards.

contact-form-section --gradient 1

Contact Form Section

Get in contact with the landing page owner. In Contentful fill in the โ€œPardot form handlerโ€ field with the desired form handler & the form will work immediately after publishing it.

custom-section --gradient 1

Custom Section

Custom Section is used to embed partials such as Job Lists, Webinar Forms, Blog Navigation etc. Also use other components to as references. Preferably use it in articles, long texts.

droplet-slider-section --gradient 1

Card carousel

Cardcarousel shows maximum 3 entries at a time, and allows the visitor to scoll through the carousel items. Used to show blog posts, landing pages or relevant content.

email-signup-section --gradient 1

Email Sign-up Section

Collect emails for events, newsletter, email marketing. In Contentful fill in the โ€œPardot form handlerโ€ field with the form handler & the form will work instantly after publishing it.

embed-code-section --gradient 1

Embed Code Section

Use iFrame or Script to embed content from external service providers such as Twitter feeds, Facebook posts, Videos (YouTube, Vimeo), Bizzabo widgets etc.

expendable-section --gradient 1

Expandable Section

Used for providing an overview of content when all of the content is not relevant to the visitor. One or many items can be used. For example an FAQ section where there may be multiple fields.

hero-section --gradient 1

Hero Section

Heros can be used in many varieties. There are many ways you can combine elements inside the Hero Section. As an image, image with text & buttons, or as text only with buttons.

kpi-section --gradient 1

KPI Section

Choose to show important indicators as a measurement of successful performance. Visualize your reached targets and business objectives. Use one or many indicators at once.

image-block-section --gradient 1

Image Block Section

Add visual interest to your landing pages by adding an image that could be decorative, or contain relevant information. E.G: A quote with a custom designed background image.

lead-generation-section --gradient 1

Lead Generation Section

The section can be used for Webinars (registration), publishing Case Studies etc. It includes a header image with logo placement, description text, a side form with an action button.

logos-section --gradient 1

Logo Section

Display logos of our customers, partners, universities etc. You can use white or black background to display the logos, just make sure they have the right contrast.

map-section --gradient 1

Map Section

Use for showing the map and address of one or multiple locations. If you press the โ€œMapโ€ button in the expanded element, the map will be centered to the selected location.

modal-section --gradient 1

Modal Section

Modals can be used to open embedded external components such as videos, social media posts and images. Use iFrame or Script

to embed components.

pdf-viewer-section --gradient 1

PDF Viewer Section

PDF content can be embedded onto a landing page. You can embed PDF document files of any size and also choose to make possible for users to download them as well.

question-and-answer-section --gradient 1

Question and Answer

Present questions to pique interest, and optionally provide answers to some of the questions below. Looks best with themes Citronis, Fluid Fuchsia and Hibiscus Ripple.

quote-slider-section --gradient 1

Quote Slider Section

Display quotes from customers, partners etc. This component is a slider, adding more than one quote will allow the visitors to browse through the quotes.

small-image-and-text-list-section --gradient 1

Small Image & Text List

Use for creating a section focused on a certain aspect, with multiple pieces of text content and their supporting images. For example: 5 steps to #frictionless finance.

social-media-section --gradient 1

Social Media Section

Providing the visitors a good way to share content they like in social media. The component includes sharing content in Facebook, Twitter, LinkedIn, YouTube etc.

speakers-section --gradient 1

Speakers Section

List speakers, guests and other personas to your need. The section includes a picture, name, job holding position & company. You can choose to display from 1 to 6 speakers at once.

story-section --gradient 1

Story Section

Visually appealing presentational page can be created with this section, E.G: the front page of a conference. Also add a countdown to any type of event that you might organize.

submenu-section --gradient 1

Submenu Section

Extend the navigation space and menu with the submenu section. It perfectly works to show useful links from your page. Choose between the 5 themes to adapt your page design.

tabs-section --gradient 1

Tabs Section

Product screenshots with supporting text can be easily displayed. Each tab should have its own image that relates to the text. Multiple elements can be included and easily slided.

text-and-fullscreen-image-section --gradient 1

Text and Fullscreen Image

Display visually appealing section with a fullscreen background image. Best used as the first section on a page. Also add a countdown to any type of event that you might organize.

text-and-image-section --gradient 1

Text and Image Section

Display a title, description and a CTA button next to an image. The image can appear plain, with droplet mask, or with a screenshot appearance (giving a shadow based on the theme).

text-and-video-section --gradient 1

Text and Video Section

Use for displaying a title, description and a call-to-action button next to a video preview image. Pressing the โ€œPlayโ€-button will play the video in a modal.

text-section --gradient 1

Text Section

Use for displaying a title and description, followed by one or two call-to-action buttons. If you have long texts, please refer to use the article component instead of Text Section.

timeline-section --gradient 1

Timeline Section

Give sense to important events by using the timeline component. Choose a beautiful background and arrange elements based on dates. Add a date, title, description & link to elements.

toast-section --gradient 1

Toast Component

Used to display useful & fast inforomation. It does also include a link and just as a notification, once you click on it or remove it won't be displayed for 30 days.

livestream-section --gradient 1

Live Stream Section

Live Stream Component is a standalone component that can be used on events like Celosphere Live, where visitors can see signup information, watch stream and see agenda information for ongoing events.

Close