ComponentsLumos 0.0.1Open component

ContentWrapper

How the content inside a section is arranged: stacked, two columns, breaking out, sticky, or a card.

Section gives you a band. ContentWrapper decides how the things inside it sit. It is one component with eight arrangements, so changing a layout is changing one word rather than restructuring markup.

Two columns

The first column holds the default slot, the second holds whatever is passed to the column2 slot. Below 64rem they stack.

astro

<ContentWrapper variant="columns">
  <Heading tag="h3" variant="h4">Two columns</Heading>
  <Paragraph>The first column holds the default slot.</Paragraph>
  <Img slot="column2" src={visual} />
</ContentWrapper>

<ContentWrapper variant="columns">
  <Heading tag="h3" variant="h4">Two columns</Heading>
  <Paragraph>The first column holds the default slot.</Paragraph>
  <Img slot="column2" src={visual} />
</ContentWrapper>

The columns variant. Below 64rem the two columns stack.

The variants

Name	Value	Notes
`stack`	`default`	Everything in one column. Add `centered` to centre the contents.
`auto-width`	None	The wrapper is only as wide as its content, rather than filling the container.
`columns`	None	Two equal columns from 64rem up, stacked below it. The second column comes from the `column2` slot.
`breakout`	None	Two columns where the second breaks out past the container edge, for a visual that should run to the edge of the screen.
`contain`	None	Two columns held inside the container, for a tighter pairing than `columns`.
`sticky-content`	None	Two columns where the text column sticks as the visual scrolls past it.
`sticky-visual`	None	The same, the other way round: the visual stays while the text scrolls.
`card`	None	The whole wrapper becomes a card with a visual behind the content. Carries `theme-dark` so the text stays legible over the image.

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`variant`	`see above`	`"stack"`	Which arrangement to use.
`centered`	`boolean`	`false`	Centres the contents of each column. Only on the `stack` variant.
`reverse`	`boolean`	`false`	Shows the second column first. Only on `columns`, `breakout` and `contain`.
`mediaOpacity`	`number (0–100)`	`70`	How visible the card's visual is. Only on the `card` variant.
`column1Class`	`string`	None	Classes for the first column, which holds the default slot.
`column2Class`	`string`	None	Classes for the second column.

The second column

Every two-column variant reads its second column from the column2 slot. Anything can go in it, and if you pass nothing the wrapper collapses to a single column rather than leaving a gap.

astro

<ContentWrapper variant="sticky-visual">
  <Heading tag="h2">Scrolls</Heading>
  <Paragraph>A long run of text.</Paragraph>
  <Img slot="column2" src={photo} alt="" />
</ContentWrapper>

<ContentWrapper variant="sticky-visual">
  <Heading tag="h2">Scrolls</Heading>
  <Paragraph>A long run of text.</Paragraph>
  <Img slot="column2" src={photo} alt="" />
</ContentWrapper>

The card variant

variant="card" turns the wrapper into a full-width card: the column2 slot becomes a visual behind the content, faded so the text on top stays readable. mediaOpacity controls the fade, from 0 to 100.

astro

<ContentWrapper variant="card" mediaOpacity={40}>
  <Heading tag="h2">Over a quiet image</Heading>
  <Img slot="column2" src={texture} alt="" />
</ContentWrapper>

<ContentWrapper variant="card" mediaOpacity={40}>
  <Heading tag="h2">Over a quiet image</Heading>
  <Img slot="column2" src={texture} alt="" />
</ContentWrapper>