Getting Started

Foundations

ColorPaletteTypographyIconographyThemingBreakpoints

Core Components

AbsoluteBackgroundImageBadgeBannerBlockLinkBoxButtonCardCheckboxCloseButtonContainerDividerFlagFlexFormFieldGenericBannerHeadingHideHugIconIconButtonIconFieldImageInputInputGroupLabelLinkPlaceholderImageProgressBarRadioRatingBadgeRelativeSelectStampSwatchTextTextAreaToggleBadgeTooltipTruncate

Modal Components

ModalScrollLock

Popover

Popover

Slider

RangeSliderSlider

Utilities

borderscolorgetPaletteColorgetTextColorOngetLinkStylesOn

Resources

MotionLayoutContributingGitHub

GenericBanner

The GenericBanner component is an actionable <banner> element with an option to pass a left or right icon, a heading, text, or a leftImage. When the intent is for the call to action to use a native <a> tag, URLProps and ctaText can be used. When the intent is for the call to action to be a native <button>, buttonClick and ctaText can be used. When using a link, it can be styled to appear as a link or a button. Similarly, when using a button, it can be styled to appear as a link or a button. By default, the call to action is styled to look like a link in both cases.

COVID-19Update: Your travel may be impacted. Please review this important info.
 <GenericBanner
    p={2}
    heading={
      <Text.span fontWeight='bold' textColor='primary.base' mr={1}>
        COVID-19
      </Text.span>
    }
    text={
      <Text.span
        textColor='primary.base'
        mr={1}
      >
        Update: Your travel may be impacted. Please review this important
        info.
      </Text.span>
    }
    ctaText={
      <Text.span
        textColor='primary.base'
        fontWeight='bold'
      >
        Read More
      </Text.span>
    }
    buttonClick={() => console.log('clicked')}
    color='caution.light'
  />

Props

PropTypeDescription
alignItemsbaseline, end, center, flex-end, flex-start, self-end, self-start, start, stretchApplies the desired align-items styling to the flex items within the banner. The default is set to center.
buttonClickfunctionIf using a button for the call to action, ie the intended action is to trigger new content in the same context, then the onClick function can be used to trigger this desired action.
buttonSizesmall, medium, largeWhen using ctaText and buttonClick and passing in a buttonVariation of fill or outline, buttonSize controls the size of the button.
buttonVariationfill, outline, linkWhen using ctaText and buttonClick, buttonVariation can be used to alter the appearance of the button element. link makes the button look like a link. link is the default value.
ctaTextnodeThis is the call to action text node to be passed in which should be paired with either URLProps or buttonClick.
fontSizestring, number or array of eitherUsed to control the font-size of heading, text and the ctaText. [0, null, null, 1] is the default.
headingnodeUsed to pass in the heading type text
iconLeftnodeUsed to pass in an icon on the left side
iconRightnodeUsed to pass in an icon on the right side
imageLeftnodeUsed to pass in an image on the left side
justifyContentend, center, left, right, flex-end, flex-start, space-around, space-evenly, space-between, start, stretchApplies the desired justify-content styling to the flex items within the banner. The default is set to center.
linkColorstringWhen using URLProps and ctaText, linkColor can be used to customize link color. Default is primary.
linkVariationfill, outline, linkWhen using ctaText and URLProps, linkVariation can be used to alter the appearance of the link element. fill and outline make the link element look like a button. link is the default value.
textnodeUsed to pass in the body text
URLPropsobject containing an href(string), and a target(string)If the call to action should be a link, ie the intended action navigates the user to a new page then href and target should be provided in URLProps
FormField
Heading