This site will be updated frequently to include all components in our design system. Feel free to submit feedback about this site.
Tooltip 1 has been updated to include a top and left variation. The tooltip to the right class was changed to include bh-tooltip-tip--left
A new progress indicators section has been added in Atoms which includes a circular indicator and a variation.
Tooltip 1 has been updated to include a new white background variation.
The following colors and their variables have been added to the Colors and Site usage pages for use throughout the design system: rating, true black, and 8 profile colors.
The radio button and checkbox form field controls have been updated to match the new Figma styles, and now include error and disabled states.
A new branding section and 6 logos were added to the Atoms page.
The star rating component has been added to the Molecules page.
The progress bar component has been added to the site.
Several new utility icons have been added to the Icons page.
The visit type toggle button has been added to the Atoms page.
The icons page has been updated with 8 new brand icons from the Figma design system.
The icons page has been updated with 32 new icons from the Figma design system.
Additionally, all text styles have been updated to remove their color, since color is often not $color-banner-black.
These are inline versions of the existing trigger notifications, available here.
In addition to SCSS variables, CSS custom properties are now available to use. They can be seen on the Colors page for easy copy/pasting, and are also shown on Site usage for incorporating them into your project as a whole.
1 new icon component was added to the Atoms page: Location map pin
2 new icons were added to the utility icons: Map pin and Map pin b
1 new icon was added to the brand icons: Video visit
2 new icons were added to the utility icons: Calendar and Map zoom out
A new Helper scripts page has been added to the site. Each script on this page can be added on to a site without any HTML or CSS necessary. The first script has been added to it, Browser and device info
The Dialog desktop component has been optimized for mobile as well, with a new full-screen mobile option, for when the dialog has lots of content
2 new icons were added to the utility icons: Star outline and Star filled
A new heading "H1b" has been added to Headings
The Favorite icon and Favorite alt icon have been updated
Updates to body copy: the body-1-medium and body-2-medium classes have been changed to body-1-strong and body-2-strong
The hover, active, and loading states were updated on the following buttons: Outlined 1 button, Outlined 2 button, Outlined 3 button, and Text button
2 new icons were added to the utility icons: Pin and Pin alt
We will be adding and modifying components frequently. Check here for brief rundowns of what's new.
© Banner Health