Allow width="page"

[bryanjonker-illinois]

https://builder3.toolkit.illinois.edu/demo/body-pure.html

Allow width="page" to move the text to left of the page (similar to width="full", but without the left: 50% / right: 50% CSS hack)

[nhjohnstone]

@bryanjonker-illinois, does this screenshot look correct? top is width=page, then full, then auto, then no width attribute.

[bryanjonker-illinois]

I'm going to add this documentation somewhere.

The no width attribute is correct. The component will respect all margins and not alter itself in any way.

width="full" means the entire component will break any parent margins and go the full width of the screen. The first image (the orange title where it is flush with the left margin) represents this width.

width="page" means that some parts of the component will break any parent margins and go the full width of the screen, but not all of it. This is going to be based on the component (so the background image would go the full width, but the title wouldn't). The second and third image (the white and blue title) represents this width.

width="auto" means that it will respect the parent margins, but it will constrain some parts of the component so it will create margins that look nice. The second and third image (the white and blue title) represents this width.

These two html representations should theoretically look the same.

<div style="max-width: 1200px; margin: 0 auto; padding: 0;">
    <ilw-component width="page"></ilw-component>
</div>

and

<div style="margin: 0; padding: 0;">
    <ilw-component width="auto"></ilw-component>
</div>