Standard elements

showing elements in the head

Standard elements with full bleed image

showing elements in the head

Standard elements with slogan

showing article header slogan style

Standard elements with user action elements

showing aricle header with user action elements

How it works

  • Possible styles
    • Article (default)
    • Stage full bleed with image or video
    • Slogan
    • User action
  • Standard elements
    1. Title Caption (1)
    2. Headline / Keyline (max. length 90 characters) (2)
    3. Infoline (3)
    4. Author information (4)
    5. Display date (5)
    6. Reading time (6)
    7.  Impulse line (7)
  • Reading time
    • Article reading time is calculated automatically
    • Time is updated automatically for any change of content
    • Override of the reading time is manually possible
  • Full bleed image
    • Image rendered on each breakpoint according to the height size selected:
      • XS Viewport
        Xsmall. small, medium and large 160px
      • S Viewport
        Xsmall. small, medium and large 236px
      • M Viewport
        Xsmall 300px | small 400px |
        medium 500px | large 600px
      • L/XL Viewport
        Xsmall 400px | small 500px |
        medium 600px | large 700px
  • User action elements (8)
    • Author image
    • Author link
    • Download or "add to calendar" functionality
    • Like button
    • Print button (there is an option available in the top-level grid to remove the grid and its content from the print version of the page completely)

How to use it

  • Consider that all structured elements – particularly the headline, the caption, and the lead text provide a concise, catchy summary of the article‘s content to attract the reader‘s interest.
  • For the page content underneath all available components can be used like on a normal content page.

Reference for publisher

AEM view

Page head component in authoring mode.

Insert full bleed image

Make sure that image has the right ratio!

Print button activation on 'User action style' header

AEM screenshot user action page header

Hiding top-level grid with content for print

AEM screenshot grid