Documentation
Feedback
Guides
Storefront Development

Storefront Development
Newsletter

The Newsletter component is a section with at least one input text with an action allowing users to submit their input.

Import

Import the components from @faststore/ui

_10
import {
_10
Newsletter,
_10
NewsletterAddendum,
_10
NewsletterContent,
_10
NewsletterForm,
_10
NewsletterHeader,
_10
} from "@faststore/ui";

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:
copy

_10
@import "@faststore/ui/src/components/organisms/Newsletter/styles.scss";

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Uses NewsletterForm, NewsletterHeader and NewsletterContent as compound components.
Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Props

Newsletter

NameTypeDescriptionDefault
card*false | trueEnables the card Variant.
colorVariant"main" | "light" | "accent"Specifies the component's color variant combination.main
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter

NewsletterAddendum

NameTypeDescriptionDefault
addendumstringSpecifies the addendum for the subscription.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-addendum

NewsletterContent

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-content

NewsletterForm

NameTypeDescriptionDefault
onSubmit*(event: FormEvent<Element>) => voidFunction called when submit button is clicked.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-form

NewsletterHeader

NameTypeDescriptionDefault
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon for the section.
title*stringTitle for the section.
descriptionstringA description for the section.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-header

Design Tokens

Local tokenDefault value/Global token linked
--fs-newsletter-padding-mobilevar(--fs-spacing-5)
--fs-newsletter-padding-desktopvar(--fs-spacing-9) 10%
--fs-newsletter-border-radiusvar(--fs-border-radius)

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-newsletter-title-sizevar(--fs-text-size-title-section)
--fs-newsletter-title-weightvar(--fs-text-weight-bold)

Icon

Local tokenDefault value/Global token linked
--fs-newsletter-icon-sizevar(--fs-spacing-5)

Variants

Card

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.
Local tokenDefault value/Global token linked
--fs-newsletter-card-border-radiusvar(--fs-border-radius)

Main

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.
Local tokenDefault value/Global token linked
--fs-newsletter-main-bkg-colorvar(--fs-color-primary-bkg)
--fs-newsletter-main-text-colorvar(--fs-color-primary-text)

Light

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.
Local tokenDefault value/Global token linked
--fs-newsletter-light-bkg-colorvar(--fs-color-secondary-bkg-light)
--fs-newsletter-light-text-colorvar(--fs-color-text-display)

Accent

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.
Local tokenDefault value/Global token linked
--fs-newsletter-accent-bkg-colorvar(--fs-color-highlighted-bkg)
--fs-newsletter-accent-text-colorvar(--fs-newsletter-light-text-color)

Customization

For further customization, you can use the following data attributes:
data-fs-newsletter
data-fs-newsletter-color-variant="main" | "light" | "accent"
data-fs-newsletter-form
data-fs-newsletter-header
data-fs-newsletter-header-title
data-fs-newsletter-header-description
data-fs-newsletter-content
data-fs-newsletter-addendum
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page