Slim
One centred line with a link, nothing else, as a floating card on a neutral fill.
Last updated
---
/**
* Slim: One centred line with a link, nothing else, as a floating card on a neutral fill.
*
* @block banner
* @order 7
*/
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { accentRuns, plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'
/** @composable */
interface Props extends BannerContent {}
const {
heading = "We've just launched a new feature",
description = 'Check out the *new dashboard*.',
linkHref = '#',
closeLabel,
} = Astro.props
---
<Banner align="center" inline heading={plain(heading)} closeLabel={closeLabel}>
<Fragment slot={description ? 'default' : 'none'}>{' '}{description && accentRuns(description).map((r) => (r.accent && linkHref ? <Link href={linkHref} color="neutral">{r.text}</Link> : r.text))}</Fragment>
</Banner>
Show codeHide code
---
/**
* Slim: One centred line with a link, nothing else, as a floating card on a neutral fill.
*
* @block banner
* @order 7
*/
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { accentRuns, plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'
/** @composable */
interface Props extends BannerContent {}
const {
heading = "We've just launched a new feature",
description = 'Check out the *new dashboard*.',
linkHref = '#',
closeLabel,
} = Astro.props
---
<Banner align="center" inline heading={plain(heading)} closeLabel={closeLabel}>
<Fragment slot={description ? 'default' : 'none'}>{' '}{description && accentRuns(description).map((r) => (r.accent && linkHref ? <Link href={linkHref} color="neutral">{r.text}</Link> : r.text))}</Fragment>
</Banner>Add
npx @ava-ui/apogee add banner/slimEvery piece of copy is a prop, with the sample copy as its default. Pass yours, or null to hide a part; see copy is props.
This copies the block to src/components/apogee/blocks/banner/ with everything it uses: Banner, Link. Place it at the top of a page, or pass fixed to a floating banner to pin it to the bottom of the viewport. Use Copy code above to paste it instead.
Accessibility
- The banner is a region named by its message, so it shows up in a screen reader’s landmark list.
- The close button removes the banner; it needs JS, so it hides without it and the banner stays.
- The link inside the line is underlined, so it never relies on colour alone.