Component: Page 1.1

This builder will allow you to generate a custom version of the Page 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

expanded (attribute)

Expanded top/bottom margins on the main item

styling (class)

Whether or not to apply global styling. Preferred option is to not use styling, followed by ilw-font, followed by ilw-format

margins (class)

Whether or not to use the default margins. Preferred option is to not use margins, followed by ilw-margin.

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-page--main-margin-top

If expanded attribute is used, the top margin of the main element will be this size

--ilw-page--main-margin-bottom

If expanded attribute is used, the bottom margin of the main element will be this size

--ilw-page--margin

Left/right margin of the main element. The ilw-margin class needs to be set if you are using this.

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.

Details

The Page component, containing styles and margins for other components.

Full Version: 1.1

Type: web component

Date Created: 2/18/2024

Version notes:

Github repository: https://github.com/web-illinois/ilw-page/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-page/1.1/ilw-page.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-page/1.1/ilw-page.css

JSON information: ilw-page.1.1.json