The Flag Layout Component
vf-flag layout component is for when you need an image, icon, or other media and text next to each other.
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.
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 vf-flag--400">...</div>
<div class="vf-flag vf-flag--middle">...</div>
|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
|600||defines the spacing between the media item and body item as
|800||defines the spacing between the media item and body item as
* The content for this variant needs to be switched so the media item follows the body
$ yarn add --dev @visual-framework/vf-flag
The style files included are written in Sass. If you're using a VF-core project, you can import it like this: