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 layout

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

github location npm version

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

Variants

Top variant

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>

Reversed Top variant

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>

Middle variant

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>

Reversed Middle variant

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>

Bottom variant

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>

Reversed Bottom variant

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>

400 (Middle) variant

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>

600 (Middle) variant

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>

800 (Middle) variant

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>

Examples

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.0.0-alpha.2

  • Handle image widths: as vf-flag uses a table layout, this does not mix well with vf-content img and max-width 100%.

1.0.0-alpha.1

  • introduces the flag layout component.
  • adds all variants that match positions and spacing.g
  • makes use of nunjucks blocks from the start.

Assets


File system location: components/vf-flag

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