# Text field brand

> An email field and a Subscribe button beside the message, as a floating card on the brand colour.

URL: https://apogee.avaui.dev/docs/banner-sections/text-field-brand
Last updated: 2026-10-20

An email field and a Subscribe button beside the message, as a floating card on the brand colour.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/banner/text-field-brand

```astro
---
/**
 * Text field brand: An email field and a Subscribe button beside the message, as a floating card on the brand colour.
 *
 * @block banner
 * @order 2
 */
import { Mail } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { 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 = 'Stay up to date with the latest news',
  description = 'New components, guides and releases, once a month.',
  submitLabel = 'Subscribe',
  closeLabel,
} = Astro.props
---

<Banner background="primary" heading={plain(heading)} description={description ? plain(description) : undefined} closeLabel={closeLabel}>
  <FeaturedIcon slot="icon" theme="light" color="primary" class="max-md:hidden"><Mail /></FeaturedIcon>
  <form slot="actions" method="post" class="flex flex-col gap-3 sm:flex-row md:w-96">
    <Input type="email" name="email" placeholder="Enter your email" aria-label="Email" autocomplete="email" required class="flex-1" />
    <Button type="submit" color="neutral">{submitLabel}</Button>
  </form>
</Banner>
```

## Add

```sh
npx @ava-ui/apogee add banner/text-field-brand
```

Every 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](https://apogee.avaui.dev/docs/banner-sections#copy-is-props).

This copies the block to `src/components/apogee/blocks/banner/` with everything it uses: Banner, Button, FeaturedIcon, Input. 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 email field is named by `aria-label="Email"` (the placeholder is not a label); the form submits without JS.

## Related

[

BannerA one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button.

](https://apogee.avaui.dev/docs/sections/banner)