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

• A design kit is being actively developed by a new team member, so we've added a new "design kit" section.
• The Visual Framework's design principles have been added.
• 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.
• We continue to work on page-level examples and boilerplates in the patterns section.

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
• 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/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.

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 2.5.1 npm git diff

• fixes issue with HTML Entities and the README when running fractal.

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 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 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 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 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 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 1.5.1 npm git diff

• Makes logo larger only when using extreme variant.

vf-sass-config 2.4.1 npm git diff

• Fixes issue now that link color disabled no longer exists.

vf-content 1.4.1 npm git diff

• Removes the 'dark mode' CSS for links - as it's not implemented.

vf-design-tokens 3.3.0 npm git diff

• removes unused link colours

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 1.4.1 npm git diff

• Removes the import for vf-links.variables.scss as it is not needed.

vf-form__fieldset 1.1.1 npm git diff

• style fieldset label as a heading 5

vf-form__item 2.0.1 npm git diff

• Add support for vf-form__select as inline element.

vf-form__radio 2.0.1 npm git diff

• improve horizontal layout of radio with flexbox

vf-pagination 1.0.0-rc.2 npm git diff

• right align pagination options

vf-intro 1.4.6 npm git diff

• Add support for anchor id attribute.

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 1.1.0 npm git diff

• removes --pullquote variant as it was never properly finalised and implemented.

vf-content 1.4.0 npm git diff

• adds top margin override for first item inside of vf-content

vf-section-header 1.4.0 npm git diff

• changes value of SVG to use ems so it scales with the typeface size.
• makes the hover effect consistent with new vf-cards
• makes the positioning match the baseline of the text

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 2.0.2 npm git diff

• Adds a little more documentation.

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