A simple banner to indicate the phase of the project.
The Phase Banner is an indicator that sits at the top of your application. It communicates the current phase of the project to show it is still being worked on.
- Phase Badge. The Phase Badge indicates the current phase to the user.
- Phase Message. Accompanying message to provide additional information to the user.
- Container The container is a wrapper that stretches to 100% of the viewport.
Sizing & Spacing
The phase banner is a full-width component - it is designed to stretch to the size of the viewport. Try to keep the Phase Message concise.
Hierarchy & Placement
There should be only one Phase Banner per page. It's placement should be at the top of the viewport, underneath the main Masthead.
By default, passing a
href will cause a regular anchor tag to be rendered for a Breadcrumb.
You can pass custom markup to appear by including it as a child of the component.
<PhaseBanner> Custom html can go here. <strong>This part is in bold!</strong> </PhaseBanner>
|children||React.Element||False||This is a new service, <a href="link">Your feedback</a> will help to improve it||HTML to display in the phase banner body|
|link||String||False||/feedback||The url to use with the default message|
|phase||String (alpha/beta)||False||alpha||Text to display in the phase banner badge|
|isFullWidth||Boolean||False||False||Set to true if used in a full-width app with a sidebar and full-width masthead. Leave false if using in a container width-restricted layout.|