Component updates and refinements in 2.4.7

This our first release in nearly a month due to some issues with an internal technical tool. ### Work on [roadmap goals](https://github.com/visual-framework/vf-core/milestones) - A design kit is being actively developed by a new team member, so [we've added a new "design kit" section](/design-kit). - The Visual Framework's [design principles have been added](/design-principles). - Unique to the web are certain types of content that support user interaction, we've begun documenting how to use "read more", icons, white space and more. We're grouping this common advice in [a web content guide](/guidance/content-guidelines). - We continue to work on page-level examples and boilerplates [in the patterns section](/patterns). ### High level changes - Updated colour function name: the Sass colour function no longer requires the `set-` prefix and can be used as `background-color: color(color-grey-darkest);` [Git diff](https://github.com/visual-framework/vf-core/commit/7fe2f4f2293813026ebc15f85b216ce1eaf186e3) - Major improvements to vf-hero and vf-card (scroll down for more)

This releases 2.4.7 to the CDN

[`https://assets.emblstatic.net/vf/v2.4.7/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.7/css/styles.css)
[`https://assets.emblstatic.net/vf/v2.4.7/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.7/scripts/scripts.js) As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).

### Card improvements `vf-card` is one of the more popular components. It is now more flexible (both for image sizes and text content) and better indicates linked content. #### [vf-card](https://latest.visual-framework.dev/components/vf-card/) 2.5.1 npm git diff * fixes issue with HTML Entities and the README when running fractal. #### [vf-card](https://latest.visual-framework.dev/components/vf-card/) 2.5.0 npm git diff * fixes issue with `vf-card__image` height in Safari. * removes `grid-template-rows` as it's difficult to define now cards do not have to have images. * adds a `--vf-card__image--aspect-ratio` CSS custom property to help with the initial image height. #### [vf-card](https://latest.visual-framework.dev/components/vf-card/) 2.4.1 npm git diff * fixes issue with `vf-card__image` height in Safari * updates documentation to replace 'title' with 'heading' so it matches CSS classname. #### [vf-card](https://latest.visual-framework.dev/components/vf-card/) 2.4.0 npm git diff * creates option to for a subheading * creates option for a card with no image * adds a svg icon similar to `vf-section-header` when the heading has a link * adds documentation * adds more examples for the variants available depending on the content * hides all variants that should not be used. #### [vf-card-container](https://latest.visual-framework.dev/components/vf-card-container/) 3.1.1 npm git diff * adds ability to define the `aspect-ratio` of the `vf-card` child components * moves the `default` context data in the `.yml` file to a `variant` to allow easier use of `include`. * fixes issue in README that made fractal fail to load the container example. ### Hero improvements Also popular is `vf-hero` which has been refined and documentation simplified to provide clearer choices. #### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) 3.1.0 npm git diff * adds link styles to the `vf-hero__heading` * updated the documentation to include the `vf-hero__heading_link` details. #### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) 3.0.0 npm git diff * removes all design variants. * replaces `vf-hero__heading__additional` with `vf-hero__kicker`. * makes the call to action link a separate entity as there would be a conflict with `vf-hero__text`. * adds a little more documentation. ### Small refinements, fixes and documentation #### [vf-logo](https://latest.visual-framework.dev/components/vf-logo/) 1.5.1 npm git diff * Makes logo larger only when using extreme variant. #### [vf-sass-config](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-config/#readme) 2.4.1 npm git diff * Fixes issue now that link color disabled no longer exists. #### [vf-content](https://latest.visual-framework.dev/components/vf-content/) 1.4.1 npm git diff * Removes the 'dark mode' CSS for links - as it's not implemented. #### [vf-design-tokens](https://latest.visual-framework.dev/components/vf-design-tokens/) 3.3.0 npm git diff * removes unused link colours #### [vf-link](https://latest.visual-framework.dev/components/vf-link/) 2.0.0 npm git diff * removes secondary link colours, as this is more often defined by the parent component. * removes the 'dark mode' styles as these are not being used. #### [vf-summary](https://latest.visual-framework.dev/components/vf-summary/) 1.4.1 npm git diff * Removes the import for `vf-links.variables.scss` as it is not needed. #### [vf-form__fieldset](https://latest.visual-framework.dev/components/vf-form__fieldset/) 1.1.1 npm git diff * style fieldset label as a heading 5 #### [vf-form__item](https://latest.visual-framework.dev/components/vf-form__item/) 2.0.1 npm git diff * Add support for vf-form__select as inline element. #### [vf-form__radio](https://latest.visual-framework.dev/components/vf-form__radio/) 2.0.1 npm git diff * improve horizontal layout of radio with flexbox #### [vf-pagination](https://latest.visual-framework.dev/components/vf-pagination/) 1.0.0-rc.2 npm git diff * right align pagination options #### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) 1.4.6 npm git diff * Add support for anchor `id` attribute. #### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) 1.4.6 npm git diff * Move the example content into a default variant to stop it printing out when using `render` #### [vf-blockquote](https://latest.visual-framework.dev/components/vf-blockquote/) 1.1.0 npm git diff * removes `--pullquote` variant as it was never properly finalised and implemented. #### [vf-content](https://latest.visual-framework.dev/components/vf-content/) 1.4.0 npm git diff * adds top margin override for first item inside of `vf-content` #### [vf-section-header](https://latest.visual-framework.dev/components/vf-section-header/) 1.4.0 npm git diff * changes value of SVG to use `em`s so it scales with the typeface size. * makes the hover effect consistent with new `vf-card`s * makes the positioning match the baseline of the text #### [vf-button](https://latest.visual-framework.dev/components/vf-button/) 1.4.0 npm git diff * Removes variants that are not to be used from the examples available. * Adds usage documentation. #### [vf-breadcrumbs](https://latest.visual-framework.dev/components/vf-breadcrumbs/) 2.0.2 npm git diff * Adds a little more documentation. #### [ebi-vf1-integration](https://latest.visual-framework.dev/components/ebi-vf1-integration/) 1.0.5 npm git diff * Handle text color on vf-button--outline. * https://github.com/visual-framework/vf-core/pull/1336