ProseAside
apps/www/src/sections/ProseAside.astro · 20 lines · group Text & prose
ProseAside — a side card inside <Prose>: a quote, a picture, a callout. Put it right after the opening <Prose> tag; the text then flows beside it. Pair it with <Prose width="wide"> so the pair uses the whole print zone. Why a tag and not a named slot: `slot="aside"` does not reach `Astro.slots.has()` from MDX, so content written by hand could never turn the two-column shape on. A tag works from MDX and from Astro alike.
In the fleet
Used on 1 site built with this engine.
Samples 1
<Prose>WHY WE BUILT IT
A thermometer is not a decision
Growers used to choose between a thermometer that told them nothing and a research mast nobody could afford.
Nordvind sits in between: the sensors that change a decision, and none of the ones that only look good on a datasheet.
- Frost, wind, rain and leaf wetness — inside the crop
- One battery per season, one bolt per station
- Readings exported as CSV, PDF or through the API
MDX of this sample
<Prose kicker="WHY WE BUILT IT" title="A thermometer is not a decision">
Growers used to choose between a thermometer that told them nothing and a research mast nobody could afford.
Nordvind sits in between: the sensors that change a decision, and none of the ones that only look good on a datasheet.
* Frost, wind, rain and leaf wetness — inside the crop
* One battery per season, one bolt per station
* Readings exported as CSV, PDF or through the API
</Prose>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| side | 'right' | 'left' | 'right' |
Source apps/www/src/sections/ProseAside.astro @ gitt.one
---
/**
* ProseAside — a side card inside <Prose>: a quote, a picture, a callout.
* Put it right after the opening <Prose> tag; the text then flows beside it.
* Pair it with <Prose width="wide"> so the pair uses the whole print zone.
*
* Why a tag and not a named slot: `slot="aside"` does not reach
* `Astro.slots.has()` from MDX, so content written by hand could never turn
* the two-column shape on. A tag works from MDX and from Astro alike.
*/
interface Props {
side?: 'right' | 'left';
}
const { side = 'right' } = Astro.props;
---
<aside class:list={['not-prose mb-8 lg:mb-4 lg:w-[42%] lg:max-w-xl', side === 'left' ? 'lg:float-left lg:mr-12' : 'lg:float-right lg:ml-12']}>
<slot />
</aside>Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.