Styleguide

Form

This is the standard form. The thank you modal has a slot for adding New Patient forms if a user checks they're a first time patient. Check out this pug file to see how the content is slotted in.

Images

See style-guide-component component in components for reference.

This is the 'BaseBackground' component, it can be passed a prop (':bgColor') to change the background color. The prop takes a string of the hex-code of the color. Its default styling is set to bg position, center and bg size as cover.

This is the 'BaseImage' component with the ':imageBackground' prop in it's default, 'false', it is positioned relative with a flex-shrink: 0 so it will behave more closely to an img tag.

This is the 'BaseImage' component with the ':imageBackground' prop toggled true it is now positioned absolute and will behave like a background image on a div.

Grid

The grid is not intended to be nested, it is a simple sass grid

.col-5
.col-8--tablet

.col-2
.col-4--tablet

.col-3
.col-2--offset

.col-4
.col-6--tablet

.col-3
.col-1--offset
.col-6--tablet

.col-4