The Flag Layout Component

About

The vf-flag layout component is for when you need an image, icon, or other media and text next to each other.

Usage

The vf-flag should, ideally, be used as part of a component with existing components for the media item and body area.

You should use the vf-flag layout component when you need to display a media item (avatar, image, logo) next to or after text.

The 'Flag Object', originally created by Harry Roberts is based on the work Nicole Sullivan did in creating the 'Media Object'.

The vf-flag allows you to determine the vertical alignment of the media and body.

As the layout component is relatively new there are no specific guidelines for when to use or not use the variants of this layout. Simply be consistent.

Even though the vf-flag layout has a default spacing design token applied as a CSS custom property fallback it is good practice in the system to use and decalre the spacing CSS class name in your project. Also, you should define the vertical variant too.

✅ <div class="vf-flag vf-flag--middle vf-flag--400">...</div>

❌ <div class="vf-flag">...</div>

❌ <div class="vf-flag vf-flag--400">...</div>

❌ <div class="vf-flag vf-flag--middle">...</div>

| variant name | description | | ------------ | --------------------------------------------------------------------- | | top | aligns the media item and body to the top of the layout | | middle | aligns the media item and body to the middle of the layout | | bottom | aligns the media item and body to the bottom of the layout | | reversed | switches the inline spacing * | | 400 | defines the spacing between the media item and body item as 1rem | | 600 | defines the spacing between the media item and body item as 1.5rem | | 800 | defines the spacing between the media item and body item as 2rem |

* The content for this variant needs to be switched so the media item follows the body

Install

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-flag with this command.

$ yarn add --dev @visual-framework/vf-flag

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-flag/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack