The featured post template provides three header layout options:

Options by header at a glance:

Mobile | Tablet | Desktop Standard Header

Standard Header

Standard layout option highlighted

This is Kinja’s default featured header option. Once you upload a featured asset the standard header appears automatically. It preserves the aspect ratio of the image/video and presents the title above the image. This layout supports:

Mobile | Tablet | Desktop Magazine Header

Magazine Header

Magazine layout option highlighted

Like the standard header, the magazine header preserves the aspect ratio of the featured image/video asset, but here the title is moved to to the left of the asset. This means a user can generally see both the title and image in its entirety on page load at desktop viewport sizes. The mobile view of the magazine header is identical to the standard header. This layout supports:

Mobile | Tablet | Desktop Impact Header

Impact Header

Impact layout option highlighted. Bottom row l-r (title alignment: bottom left, bottom center, horizontal/vertical center, bottom right, reverse color scheme: white title on black gradient, black title on white gradient)

The impact header is designed to create a fullscreen landing experience. There are four title placement options as well as a reverse color scheme to create more contrast if the title clashes with the background element. It is important to note that the impact header does not support video with audio. Video used in the Impact Header should be a silent and short clip (recommended max length of roughly 8-10 seconds). The video will loop continuously adding background motion to the header.

  • Video loop (no audio, autoplay)
  • Static images
  • Gifs
  • Sponsored labeling
  • Parallax effect (on static images)
  • Custom navbar (includes user login, notifications and a white blog logo or text fallback if no logo exists)
  • Four title alignment options (bottom left, bottom center, bottom right, vertical/horizontal center)
  • Reverse title color option (white title on black gradient, or black title on white gradient)

Videos and images are treated as a background element in this header and they scale and center according to the width of the browser so portions of the asset may be obscured depending on width of the viewport. This header should not be used if you intend to preserve the aspect ratio of the image (such as a custom illustration/graphic). Refer to standard or magazine options.