CSS Variables

The following CSS variables can be used in custom style sheets for a homepage, section, or tile to set values used within the psc_hpmodel-A styling. However, this is not an exhaustive list of CSS variables. This table lists the significant set of CSS variables.

CSS Variable	Applicable Level	Description
--pt-tile-max-width	Section Tile	When set for elastic, simple list, and simple tiles, it specifies the maximum width the tiles can grow. Since this is typically applied to a collection of tiles, the section level is the usual place to specify this variable. Example: --pt-tile-max-width: calc(var(--pt-tile-spacing) * 2 + var(--pt-tile-image-size) + 35ch); /* tile padding plus image width plus 35 characters max */
--pt-tile-font-weight	Section Tile	Undefined CSS variable by default, used to indicate the font-weight for tiles rendered as links. Typically used for special links rather than for an entire collection of links. Internally, the default for tiles rendered as link is font weight of 100 (or normal) due to fallback value since this CSS variable is not defined anywhere.
--pt-section-background	Homepage Section	Sets the background for the section (all sections if set at the homepage; if those sections do not specify a color) when set at the section level. Use this variable if you want a complex background on not a simple color from the color palette (for example an image with a background color). Example:--pt-section-background: var(--pt-theme-neutral-texture) repeat var(--pt-theme-neutral-10);
--pt-section-text-color	Homepage Section	Sets the header and general text color for a section (or sections if set at the homepage level). Since this model typically does not involve collapsible section headers, there should be no need for a separate hover color.
--pt-section-link-text-color	Homepage Section	Color to be used for links found in the section (or sections when defined at homepage level). Typically defaults to the same color as the section text color. Can be reset at the tile level by using psc_tile-simple-link for a special link text color.
--pt-section-border-color	Homepage Section	Special decorative border color that appears below the section image. By default, there is not a border used around each section but a shadow around a section with this model. This variable must be used in conjunction with the --pt-section-border-style variable, which by default is set to None. Default value for this variable is the section text color. If the section is a transparent section, the default border color will also be transparent instead of the section text color.
--pt-section-border-style	Homepage Section	Sets the border style for the section. Default value is None.
--pt-section-border-radius	Homepage Section	Size of the border radius applied to a section.
--pt-section-shadow	Homepage Section	Complete specification for the shadow of a section.
--pt-tile-separator-color	Homepage Section	Special color used to separate tiles (typically used for sections that display tiles as a list).
--pt-hpsection-image-url	Section	While this property is typically populated through the section image check box on the non-collapsible section in the homepage definition, this variable can also be used within custom style sheets to provide dynamic control over a section image. For example, you can use this variable when the section background changes and you need to change the image for color contrast.
--pt-homepage-bottom-spacing	Homepage	Use to customize the lower spacing of the homepage. Normally, it is the same as the section spacing. It is used by the style psc_homepage-no-bottom-spacing to remove the gap for footer support.
--pt-homepage-text-color	Homepage	This variable is used to set the default text color for a homepage in general. This is important for transparent sections so that the text color can have a contrasting color with the homepage background. This variable is not defined in any delivered stylesheet but is available for use by application developers and customers to set the overall default text for the homepage for transparent sections.
--pt-tile-image-filter	Section Tile	By default this variable is not defined (that is, set to None). This variable allows changes in a tile's primary image through CSS filter property. Useful for transparent tiles to attempt to manipulate images to support proper contrast against changes to the background without changing images (if possible). Example: --pt-tile-image-filter: contrast(3) invert(1);
--pt-custom-homepage-background	Homepage	By default, this variable is not defined (that is, set to transparent). When set at the homepage level, this variable allows applications to have different homepage backgrounds for different pages. Example: --pt-custom-homepage-background: var(--pt-theme-neutral-texture) repeat var(--pt-theme-neutral-10);