alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Flag github location npm version

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


Variants


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

A couple sat on a sofa looking at a laptop

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "top": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "top": true
} %}
                
HTML
<div class="vf-flag vf-flag--top vf-flag--400">

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

</div>
              

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

A couple sat on a sofa looking at a laptop
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "reversed": true,
  "top": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "reversed": true,
  "top": true
} %}
                
HTML
<div class="vf-flag vf-flag--top vf-flag--reversed vf-flag--400">

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

</div>
              
A couple sat on a sofa looking at a laptop

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "middle": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "middle": true
} %}
                
HTML
<div class="vf-flag vf-flag--middle vf-flag--400">

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

</div>
              

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

A couple sat on a sofa looking at a laptop
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "reversed": true,
  "middle": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "reversed": true,
  "middle": true
} %}
                
HTML
<div class="vf-flag vf-flag--middle vf-flag--reversed vf-flag--400">

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

</div>
              
A couple sat on a sofa looking at a laptop

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "bottom": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "bottom": true
} %}
                
HTML
<div class="vf-flag vf-flag--bottom vf-flag--400">

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

</div>
              

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

A couple sat on a sofa looking at a laptop
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "reversed": true,
  "bottom": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "reversed": true,
  "bottom": true
} %}
                
HTML
<div class="vf-flag vf-flag--bottom vf-flag--reversed vf-flag--400">

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

</div>
              
A couple sat on a sofa looking at a laptop

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "middle": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 400,
  "middle": true
} %}
                
HTML
<div class="vf-flag vf-flag--middle vf-flag--400">

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

</div>
              
A couple sat on a sofa looking at a laptop

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 600,
  "middle": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 600,
  "middle": true
} %}
                
HTML
<div class="vf-flag vf-flag--middle vf-flag--600">

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

</div>
              
A couple sat on a sofa looking at a laptop

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "layout",
  "example": true,
  "spacing": 800,
  "middle": true
}
 %}
{% include "../path_to/vf-flag/vf-flag.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-flag', {
  "component-type": "layout",
  "example": true,
  "spacing": 800,
  "middle": true
} %}
                
HTML
<div class="vf-flag vf-flag--middle vf-flag--800">

  <div class="vf-flag__media">
    <!-- this HTML is for example use only -->
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/CABANA_group02438.jpg?&width=300" alt="A couple sat on a sofa looking at a laptop">

  </div>

  <div class="vf-flag__body">
    <!-- this HTML is for example use only -->
    <p class="vf-u-type__text-body--2 vf-u-margin--0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus esse accusamus quos cupiditate, totam dolorem aspernatur quia repellendus, veniam error, aliquid ut. Odio tempora maiores suscipit libero ea dolore quidem!</p>
  </div>

</div>
              
Installation info

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

Changelog

Changelog

1.1.2

  • Implements updated vf-search markup.
  • Changes a few pages on how it works with nunjucks and markdown.

1.1.0

  • updates Design Tokens homepage.
  • adds neutral colour tokens
  • adds 'status banners' for components in the documentation page.
  • Adds the form options as their own set of components in the list.
  • https://github.com/visual-framework/vf-core/pull/1390/files
  • Updates to use 11ty 0.12.1
  • https://github.com/visual-framework/vf-core/pull/1435

1.0.24

  • changes the vf-intro so it's a white background, removes the padding.
  • changes the links in vf-intro to be the 'correct' buttons.

1.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-flag

Find an issue on this page? Propose a change or discuss it.