Section page components

Section pages are the ones that show a list of articles from a specific section (e.g: Home).

We can find individual articles (layout components) or grouped articles (content groups). The combination of different layouts and content groups is what gives personality to a Tenant.

Section page structure is built with:

1. Layouts: individual variants of layouts
2. Content groups: articles that are grouped by a common category and have a header title

Common mixins

You can apply custom styles to a specific layout targeting its layout class name via the following mixin:

If you don't specify a $layoutName the styles from mixin will be applied to all layouts.

IMPORTANT

customLayout mixin must be applied in the custom.s.scss file. Otherwise will throw a compilation error.

@include customLayout(
	$layoutName: null,
	$letterSpacing: null,
	$titleSize: null,
	$titleFontFamily: null,
	$titleLineHeight: null,
	$titleColor: null,
	$subtitleSize: null,
	$subtitleColor: null,
	$excerptSize: null,
	$filletable: true,
	$filletStyle: null,
	$photoHeight: null
);

Example of how a customLayout mixin is applied:

@include customLayout(
	$layoutName: photo,
	$titleColor: #777
);

Modify layout subtitle:

@include customSubtitle(
	$display: inline-block,
	$padding: 0.2rem 0.4rem,
	$marginBottom: null,
	$fontSize: null,
	$fontFamily: null,
	$letterSpacing: null,
	$color: $white,
	$bgColor: $secondary-color,
	$radius: null
);

Modify layout category:

@include customCategory(
	$margin: null,
	$padding: null,
	$fontSize: null,
	$fontFamily: null,
	$letterSpacing: null,
	$color: $secondary-color,
	$bgColor: null,
	$borderRadius: null
);

Modify layout author and date:

@include customLayoutMeta(
	$layoutName: null,
	$metaDisplay: null,
	$metaColor: null,
	$authorColor: null,
	$authorTransform: null,
	$authorWeight: null,
	$dateColor: null,
	$dateTransform: null,
	$separationMeta: null);

Layouts

Find the catalog of all the available layouts at Marfeel, and how to use them, in the dedicated layouts article.

Content groups

Content groups are collection of articles in a section page, displayed with a common header and style. They group articles belonging to the same category and are usually reserved for the home section. Content groups are predefined layout structures that help you build Tenants faster.

1. Header: title for the content group. There is a mixin that allows you to customize its look and feel.
2. Layouts: the combination of layouts can be loaded from a predefined template or created manually.

Content groups are created using the layout descriptor, and you can use the whitecollar to control in greater detail which articles compose it. This article covers both use cases.

Ad placements

If active, the AdDealer is adding ad placements automatically between content groups. You don't have to manually select ad placement templates.

Header styles

All content groups have a header title that can be styled with the following mixin:

@include customBalcon(
	$specificBalcon: null,
	$titleFontSize: null,
	$titleFontFamily: null,
	$titleTextTransform: null,
	$titleTextColor: null,
	$separatorColor: null,
	$titleCentered: null,
	$balconBackground: null,
	$headerBackground: $balconBackground,
	$titleBgColor: null,
	$padding: null,
	$marginHeader: null,
	$hasBorder: false,
	$borderTop: null,
	$borderBottom: null,
	$borderLeft: null,
	$borderRight: null,
	$borderAll: null,
	$borderImage: null,
	$separatorHeight: null,
	$separatorPositionTop: null
);

$specificBalcon: name of the content group you want to target. If you left this variable to null the styles applied will affect all the content groups.

TIP

You can configure the header name and its visibility in the layoutDescriptor files.

Find the catalog of all the available content groups at Marfeel, and how to use them, in the dedicated content groups article.