Design Notes

Man and child Image by Humphrey Muleba on Unsplash

The above is my recreation of a banner heading on the cafcass site using a clip path swatch for the image. I have used a circle clip path swatch for small and a custom clip path for medium and large.

Seams used to create the bottom curve

Headings are inside a link container so that they can become links as required.

The larger heading has the Google font 'Quicksand' applied. I have used the Google Font Pro stack which gets the job done. If I was looking to optimise the page for speed I would consider downloading the Quicksand font woff2 file and using Web Font Pro with a Performance Preload stack as well potentially.

Animated heart clip path and linear gradient from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

The last example is an svg clip path using text and the Quicksand font (previously loaded for the top banner) to create an interesting effect. It can be used with whole words. I have restricted it to a single letter because it is hard to see how this can be made to be responsive. (Longer words get truncated as screen width decreases)! Also it seems difficult to center the result on anything but a desktop.