Unverified Commit 2a78bcbe authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

docs: vf-hero imagery sizing and usage (#1734)

Closes #1641
parent d758aae5
Pipeline #218437 passed with stages
in 8 minutes and 22 seconds
### 3.3.3
* Improve docs on vf-hero image sizing
* https://github.com/visual-framework/vf-core/issues/1641
### 3.3.2
* Drop use of vf-stack-margin--custom.
......
......@@ -8,9 +8,17 @@ The `vf-hero` component is to be used as a visual queue and page header. As need
## Usage
By default the `vf-hero` makes use of the roundels background image. To keep the raw structure of the HTML and CSS the same this is applied using a CSS custom property.
By default the `vf-hero` makes use of the roundels background image. To keep the raw structure of the HTML and CSS the same this is applied using a CSS custom property. The default variant is equivalent to `vf-hero--1200`.
The default variant is equivalent to `vf-hero--1200` and the recommended image size is 3000 by 1000 pixels.
### Hero background images
You can bring your own image to use with the vf-hero.
- Size: recommended image size for a typical hero is 3000 by 1000 pixels.
- Positioning: people and other important imagery should be placed on the right side. The image will, by default, vertically centre and align to the right side.
- Imagery: most of the image should be abstract as to not visually compete with the text in the hero box.
- Text: do not use raster text as part of the image.
- Consult design: the image should be made in consultation with your organisation's design team for brand alignment and input on how best to create it.
### Content
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment