Component: Award List 1.0-alpha

This builder will allow you to generate a custom version of the Award List component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

role (fixed attribute)

ARIA role

region

aria-labelledby (fixed attribute)

ARIA region label

awards-2024

size (attribute)

Heading size

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-award-list--font

Set the font used for the nav [default: var(--il-font-sans)]

--ilw-award-list--heading-size

Large heading size [default: 2.5rem]

--ilw-award-list--heading-weight

Large heading weight [default: bold]

--ilw-award-list--heading-color

Large heading color [default: var(--il-blue)]

--ilw-award-list--heading-border-top

Large heading top border [default: 4px solid var(--il-orange)]

--ilw-award-list--heading-gradient

Linear gradient for the fade [default: linear-gradient(4deg, #FFF 32.24%, rgba(255, 255, 255, 0.58) 84.44%)]

--ilw-award-list--heading-padding

Large heading padding [default: 1.2rem 1.5rem 1rem]

--ilw-award-list--heading-margin

Large heading margin [default: 2.5rem 0 2rem]

--ilw-award-list--spacing

Spacing between ilw-award-list elements [default: 5.75rem]

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.