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.

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>