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


Read the guides on how to use components in Contentful.

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.

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.

chart-section --gradient 1

Chart Section

The Chart Section can be used to display multiple chart components from our IBC software and allows you to put descriptions for each one (aside descriptions also).

collection-section --gradient 1

Collection Section

Used to create collections such as Authors, Blogs, Resource Cards and Resource Collections.

The content for this collection is going to be handpicked by you and will contain a maximum of 6 entries.

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.

navbar-section --gradient 1

Navbar Section

Customize your own Navigation for your own needs. The preferable number of items to add to the navigation is 3-5. Use Superfluid icons for the dropdown items. Also you can add a side banner.

Navbar now also serves as a link to Microsites (Previously known as subpages).

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.

resource-collection-section --gradient 1

Resource Collection

Used only to create Resource Collections, this component does not limit the number of entries and will let you choose the content you want to include.

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.

social-sharing-section --gradient 1

Social Sharing Section

This component can be used if you want to share an article or blog post. It can be embedded in Article Section and in Single Blog Posts. It includes Facebook, Twitter, LinkedIn & E-mail.

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.

table-section --gradient 1

Table Section

Use for displaying tabular data, such as pricing or feature comparisons. Each table column can have CTAs and the table can be expanded to reveal further information

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.

tag-section --gradient 1

Tag Section

Tag Section creates a Collection for you according to what you fill in the contentful. In this component you need to specify the Tag you want and the Content Type (Blog, Author, Resource Card, Resource Collection), depending on that the collection is going to automatically contain all files that use that Tag and are the Content type you chose.

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.