Layouts Catalog

All the available layouts are exposed as JSP templates. Know the relative path of a layout (theme name + filename) to use it.

In addition to showing all the available layouts, this catalog provides:

• Variants with mixins when they exist
• Core sources that are used under the hood (jsp templates and scss files)

Photo

Articles in a photo layout are square with a full-size photo, and the title on top of this photo.

photo/photo

Variants:

@mixin fullWidthBoxColorPhotoLayoutTitle($color: rgba(0, 0, 0, 0.8));

@mixin highlightPhotoLayoutTitle(
    $color: null,
    $backgroundColor: rgba(0, 0, 0, 0.8),
    $borderBottom: 4px solid,
    $photoHeight: null);

Core template: articleTemplates/imageTopWrapperAuthorFirst.jsp

Core SCSS: scss/layouts/photo/_photo.s.scss

photo/photo_photoBigTitle

Core template: articleTemplates/imageTopWrapperDateFirstFullBackground.jsp

photo/photo_slider

Carousel with photo layouts. The number of items are determined as a layout descriptor attribute.

photo/photo_grid_2

Composed by 2 photo/photo_flow.jsp next to each other.

Base is photo/photo.jsp.

photo/photo_grid_6

Composed by 3 rows of 2 photo/photo_flow.jsp. Base is photo/photo.jsp.

newspaper/photo_2

Composed by 2 articleTemplates/photo.jsp. Base is photo/photo.jsp.

Pill

newspaper/pill

Core template: articleTemplates/imageTop.jsp

newspaper/pill_fullWidth

Core SCSS: scss/layouts/newspaper/_pill_fullWidth.s.scss

newspaper/pill_fullWidth_card

Core SCSS: scss/layouts/newspaper/_pill_fullWidth_card.s.scss

newspaper/pill_topTitle

Core template: articleTemplates/imageMid.jsp

Core SCSS: scss/layouts/newspaper/_pill_topTitle.s.scss

newspaper/imageBottom_titleSubtitleAuthor

Core template: articleTemplates/imageBottomTitleSubtitleAuthor.jsp

Core SCSS: scss/layouts/newspaper/imageBottom_titleSubtitleAuthor.s.scss

newspaper/photo_titleOverlapLeft

Core SCSS: scss/layouts/newspaper/photo_titleOverlapLeft.s.scss

newspaper/photo_titleOverlap

@mixin colorPhotoTitleOverlap(
	$color: $secondary-color,
	$height: 350px,
	$textMargin: -100px,
	$aligment: center,
	$borderTop: 3px solid $color,
	$borderBottom: null,
	$borderLeft: null,
	$borderRight: null,
	$borderAll: null
);

Core template: articleTemplates/imageTopWrapperAuthorFirst.jsp Core SCSS: scss/layouts/photo/photo_titleOverlap.s.scss

newspaper/pill_2

Composed by 2 newspaper/pill_flow.jsp next to each other.

Base is articleTemplates/imageTopWrapper.jsp.

Thumb

newspaper/thumb

Core template: articleTemplates/imageTopWrapper.jsp Core SCSS: scss/layouts/newspaper/_thumb.s.scss

newspaper/thumb_reverse

Core template: articleTemplates/imageTopWrapperTitleFirst.jsp Core SCSS: scss/layouts/newspaper/_thumb_reverse.s.scss

newspaper/thumb_card

Core template: articleTemplates/imageTopWrapper.jsp Core SCSS: scss/layouts/newspaper/_thumb_card.s.scss

Only text

newspaper/thumb_text

Core template: articleTemplates/noImage.jsp

newspaper/text_compact

newspaper/breakingNews

Opinion

newspaper/opinion

Core template: articleTemplates/opinion.jsp

newspaper/author

Core template: articleTemplates/author.jsp

newspaper/opinion_imgReverseBottom

Core template: articleTemplates/titleQuote.jsp

newspaper/author_imgReverseBottom

Core template: articleTemplates/author.jsp