CSS Variables for Styling Homepages and Sections

The following table lists the CSS variables for styling homepages and sections.

The default CSS grid for homepage is a 12 column layout with the outer two columns used for a gutter or margin. At the homepage level, the element style psc_hp-sections contains the section layout, which can be modified through custom style sheets at the same level. The section specific layout can be overridden at the individual section level.

CSS Variable	Applicable Level	Description
--pt-section-grid-column-count	Defined a section container level of psc_hp-sections element.	Determines the number of columns (including gutters) to be used in lay out sections on a homepage. The default number of columns is 12.
--pt-section-template-columns	Defined a section container level of psc_hp-sections element.	Specifies the actual layout of columns as far as sizing into which sections will be placed. The default is --pt-section-template-columns: var(--pt-section-gutter) repeat(calc(var(--pt-section-grid-column-count) - 2), minmax(0, 1fr)) var(--pt-section-gutter);
--pt-section-gutter	Defined a section container level of psc_hp-sections element.	Column sizing for the side gutters for layout of the homepage. The default is 0px (meaning that the actual margin is implemented through the gap for sections) so the gutter found on the sides of the homepage will be the size of a section gap.
--pt-section-spacing	Defined a section container level of psc_hp-sections element.	Specifies the spacing between sections (and the gutter). The default value is 32px.
--pt-section-min-spacing	Defined a section container level of psc_hp-sections element.	Specifies the minimum spacing for responsiveness. The default is 5cqi. cqi units are container units as a percentage of inline sizing (width).
--pt-section-grid-gap	Defined a section container level of psc_hp-sections element.	Specifies the actual gap between sections (which is responsive). The default is as follows: --pt-section-grid-gap: min(var(--pt-section-spacing,32px),var(--pt-section-min-spacing,5cqi));
--pt-section-padding	Section	Specifies the padding between the content and the bounding box container. The default is 32px. You can specify different paddings for each size using standard padding syntax. This variable is useful for full width tiles that need to have the contents moved to align better with the non-full width sections. Example: --pt-section-padding: calc(2 * var(--pt-section-interior-spacing)) calc(4 * var(--pt-section-interior-spacing) + var(--pt-section-gutter));
--pt-section-action-button-adjust	Section	Specifies the additional offset for the horizontal alignment of the section action button in addition to the default section padding. It is useful when the section is a full width section and the interior has been moved using the --pt-section-padding. Example: --pt-section-action-button-adjust: calc(3 * var(--pt-section-interior-spacing) + var(--pt-section-gutter));
--pt-section-row-start	Section	Specifies the grid row starting position for a section. The default is Auto.
--pt-section-row-end	Section	Specifies the grid row ending position for a section. The default is Auto.
--pt-section-column-start	Section	Specifies the grid column starting position for a section. The default is 2 (leaving the first column for a gutter).
--pt-section-column-end	Section	Specifies the grid column ending position for a section. The default is -2 (spans all columns to the next to the last column so as to leave a gutter).
--pt-section-content-max-height	Homepage Section Container Section (typical)	Use in conjunction with style psc_section-content-scrollable to specify the maximum height for the content of a section before it starts to vertically scroll. This variable is not defined but will default to none (for not max-height) Example: --pt-section-content-max-height: 17ch; /* for 17 charcters tall */
--pt-section-content-padding	Homepage Section Container Section (typical)	Use in conjuction with style psc_section-content-scrollable and psc_tile-shadow. Since shadows extend beyond the boundaries of the tile and therefore the section content, additional padding must be added to the section content to avoid clipping visual dressings that are external to the tile (like shadows). Typically, it would be the maximum spread size for a shadow. Example: --pt-section-content-padding: 8px; /* size of shadow spread */