Detail Card Block

This block can be used to display a hover-to-reveal blurb of content with an image.

Episerver Required Blocks

Detail Card - Hover-to-reveal content block with required background image.

Add To

The main content area on any content page
Padding containers
Layout containers

Fields & Configurations

Property	Configuration	Validation
Display Mode	Choose a value from the drop down for the block’s color values. Light Dark Primary Light Primary Dark Secondary Light Secondary Dark	Required
Desktop Image	Add an image content reference to display as the block’s background on desktop.	Required
Mobile Image	Add an image content reference to display as the block’s background on mobile devices.	Required
Sub-Header	Add a text value to display above the header text.
Header	Add a text value to display prominently on the block.	Required
Body	Add a text value to the text area input to display beneath the header text and sub-header.	Maximum length of 450 characters
CTAs	Add CTA block content references to the content area.	Maximum of 2 CTA blocks

Example Blocks

The examples shown below represent this block and all of its various configurations.

This is the sub-header.

This is the header.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Detail Card Block

Episerver Required Blocks

Add To

Fields & Configurations

Example Blocks

This is the header.

This is the header.

This is the header.

This is the header.

This is the header.

This is the header.

Examples Using Layout Blocks

This is the header.

This is the header.

This is the header.

This is the header.

This is the header.

Examples Using Padding Containers

This is the header.

This is the header.

This is the header.

This is the header.

This is the header.

This is the header.