CSS Variables for Styling Tiles

The following table lists the CSS variables that are specific to tiles. While these may be set at the tile level, you should note that the width or height of a tile affects the layout of a section.

CSS Variable Applicable Level Description

--pt-tile-width

  • :root

  • Homepage

  • Section

Defines the BASE width for a tile. It is the smallest unit for the layout using CSS grid.

--pt-tile-height

  • :root

  • Homepage

  • Section

Defines the BASE height for a tile. It is the smallest unit for the layout using CSS grid.

--pt-tile-spacing

  • :root

  • Homepage

  • Section

Internal padding for a tile.

--pt-tile-gap

  • :root

  • Homepage

  • Section

Spacing between tiles

--pt-tile-width-#--pt-tile-height-#

  • :root

  • Homepage

  • Section

Where "#" is the dimension specified in the Tile CREF definition (or via the Tile API), specifies the width/height values of a given tile per the specified configuration. With this model, the width (unless it is a list, elastic, or simple tile) is FIXED but the height value is more of a minimum allowing the content to grow.

--pt-tile-shadow

  • Homepage

  • Section Container

  • Section (typical)

  • Tile

Specifies the complete shadow specification for the default state of a tile using psc_tile-shadow styling.

Example:

--pt-tile-shadow: 0px 2px 4px 0px var(--pt-tile-alt-shadow-color, transparent);

--pt-tile-hover-shadow

--pt-tile-active-shadow

Wherever --pt-tile-shadow is defined.

Specifies the complete shadow specification for hover and active states of a tile. The default is that hover and active shadows are the same as the default value for --pt-tile-shadow. If the default value for --pt-tile-shadow is changed, you should also change --pt-tile-hover-shadow and --pt-tile-active-shadow variables as well.

--pt-tile-alt-shadow-color

  • :root

  • Homepage

  • Section Container

  • Section

  • Tile

Specifies the default shadow color to use when applying the style psc_tile-shadow. This is specified in PT_CUSTOM_PROPS (defined in :root) and matches the default section shadow color.

Example:

--pt-tile-alt-shadow-color: rgba(255,255,255,0.3);