Content overview component

Usage

The content overview component is a collection of cards that contain content and actions about a single subject.

Examples

The layout of the cards in the content overview depend on the template of the referenced page. The product family template allows you to use icons & text in the description, where the article and video template only support text.

Cards Variants

Variant 1: Content Focused

Video

Sexting: 5 mythes ontkracht

Over sexting is al heel wat gezegd en geschreven. Maar wat is er allemaal van waar?

Article

Sexting: "Mijn kind zou dat nooit doen!" (Yeah, Right!)

1 op 5 tieners verstuurt wel eens een naakfoto. Waarom doen ze dat? En wat als het fout gaat?

Digitale TV

Supersnel internet

Mobiele data

23 Nov 2022 - 24 Nov 2022

This NSPIRE page is been developed using only Touch UI components!

Variant 2: Image Focused

Sexting: 5 mythes ontkracht

Over sexting is al heel wat gezegd en geschreven. Maar wat is er allemaal van waar?

Sexting: "Mijn kind zou dat nooit doen!" (Yeah, Right!)

1 op 5 tieners verstuurt wel eens een naakfoto. Waarom doen ze dat? En wat als het fout gaat?

Ontdek Telenet

Event demo

This NSPIRE page is been developed using only Touch UI components!

Content overview rows

One Row

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Two Rows

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Pagination styles

Default

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Light

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Dark

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Sexting: 5 mythes ontkracht

Over sexting is al heel wat gezegd en geschreven. Maar wat is er allemaal van waar?

Sexting: "Mijn kind zou dat nooit doen!" (Yeah, Right!)

1 op 5 tieners verstuurt wel eens een naakfoto. Waarom doen ze dat? En wat als het fout gaat?

Ontdek Telenet

Event demo

This NSPIRE page is been developed using only Touch UI components!

Streamz

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Sexting: 5 mythes ontkracht

Over sexting is al heel wat gezegd en geschreven. Maar wat is er allemaal van waar?

Sexting: "Mijn kind zou dat nooit doen!" (Yeah, Right!)

1 op 5 tieners verstuurt wel eens een naakfoto. Waarom doen ze dat? En wat als het fout gaat?

Ontdek Telenet

Event demo

This NSPIRE page is been developed using only Touch UI components!

Play Sports

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Sexting: 5 mythes ontkracht

Over sexting is al heel wat gezegd en geschreven. Maar wat is er allemaal van waar?

Sexting: "Mijn kind zou dat nooit doen!" (Yeah, Right!)

1 op 5 tieners verstuurt wel eens een naakfoto. Waarom doen ze dat? En wat als het fout gaat?

Ontdek Telenet

Event demo

This NSPIRE page is been developed using only Touch UI components!

Play More

The video component allows you to embed a video on a page.

Read guidelines

The title component is intended to be used as the title or heading of a section of content. Various formatting options are available.

Read guidelines

The text component allows the display of a rich text paragraph on the page. Various formatting options are available.

Read guidelines

Table and Table row

The table and table row component enables you to add a responsive table with different rows and columns on a page.

Read guidelines

The social media component allows you to configure the icons and links to social media websites.

Read guidelines

The separator component allows you to add a devider on the page to separate content.

Read guidelines

This is used below the body of the topic to add quick links to related pages.

Read guidelines

Quotes are used to display a quotation.

Read guidelines

Product Summary

This consists of a title, a layout container and an optional button and pricing.

Read guidelines

This component shows the price of a product in a visual or textual way.

Read guidelines

This allows you to embed images that are wider than the 12 page columns.

Read guidelines

Navigation List & Content

The navigation list component will take the author defined properties and displays them as navigation items.

Read guidelines

Navigation bars offer a way to switch between primary destinations.

Read guidelines

The multisolution allows you to create a tab kind of structure using blocks.

Read guidelines

The Marketing card component allows you to create a card on the page.

Read guidelines

This guides the client in a conversational way to the goal of his search.

Read guidelines

In-page Navigation

This helps users scan the content and guides them to the section they need.

Read guidelines

Image-title-text

This is a more efficient option to embed the three components at once.

Read guidelines

The image component allows you to embed images on the page. Various formatting options are available.

Read guidelines

The main banner placed on top of a page with the purpose of enticing visitors.

Read guidelines

The dashboard card component allows you to create a card for an underlying webpage.

Read guidelines

Contact Touchpoint

An overview block presenting the different contact options to the customer.

Read guidelines

The contact component allows you to implement a contact container with a fixed title component and a layout container below.

Read guidelines

A slideshow component for cycling through images and videos.

Read guidelines

A button is used to prompt an immediate response (click). There are different button modes available, as wel as button ID analytics.

Read guidelines

A visual label or indicator used to convey status or highlight content.

Read guidelines

Authorable Notification

This component is used to display information banners on a page.

Read guidelines

Display a series of content items that a user can collapse/expand.

Read guidelines

Sexting: 5 mythes ontkracht

Over sexting is al heel wat gezegd en geschreven. Maar wat is er allemaal van waar?

Sexting: "Mijn kind zou dat nooit doen!" (Yeah, Right!)

1 op 5 tieners verstuurt wel eens een naakfoto. Waarom doen ze dat? En wat als het fout gaat?

Ontdek Telenet

Event demo

This NSPIRE page is been developed using only Touch UI components!