Content container

This container adds support for long form content where it may not be practical to assign classes, such as Markdown or WYSIWYG text.

github location npm version

Usage

It also makes some adjustments for longer form text, such as vertical spacing and making visited links purple.

This container adds basic support for p, ul, hr, a and other core html elements.

Some components may also add specific support for .vf-content

Variants

EMBL communications strategy 2018-2020

This communications strategy outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.

The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.

This document was last revised 7 March 2018

Section 1: EMBL’s vision and mission

EMBL’s vision

Enabling scientists worldwide to discover the secrets of life

EMBL’s mission

  1. Uncovering the molecular basis of life through research
  2. Providing research infrastructure and services
  3. Training and inspiring the next generation of scientists
  4. Driving research, innovation and progress through technology development
  5. Interactions with industry and technology transfer
  6. Playing a leading role in the integration of life science research

Further examples of bullets

  • A bulleted item
  • A nested bulleted item
  • A nested bulleted item
  • A bulleted item
  • A bulleted item
  • A bulleted item
  • A bulleted item

Definition lists

Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

What is EMBL?

EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.

EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.

An example figure image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.
An example figure image
A very wide image.

We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.

Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.

Section 2: EMBL’s goals

Goal 1: Advancing society

The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.

Communications goals:

Show the impact of our work in tackling society’s big challenges

Goal 2: Enable excellent science to advance our understanding of life

We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.

Communications goals:

  • Develop and sustain support for EMBL from important stakeholders
  • Attract the best scientists, engineers, technicians and support staff
  • Inform scientists about training opportunities and services

We are a group of user experience specialists in an international scientific organisation

Our aim is to help teams design services to meet the needs of their users

We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation

EMBl-EBI Web Development UX Team Mission

Anastasia Vlasiuk in the lab
Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL
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": "container"
}
 %}
{% include "../path_to/vf-content/vf-content.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-content', {
  "component-type": "container"
} %}
                
HTML
<div class="vf-content">
  <h1 id="embl-communications-strategy-2018-2020">EMBL communications strategy 2018-2020</h1>


  <p class="vf-content__standfirst">This <a href="#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
  <p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
  <small><i>This document was last revised 7 March 2018</i></small>

  <h2 id="section-1-embls-vision-and-mission">Section 1: EMBL’s vision and mission</h2>
  <h3 id="embls-vision">EMBL’s vision</h3>
  <p>Enabling scientists worldwide to discover the secrets of life</p>
  <h3 id="embls-mission">EMBL’s mission</h3>
  <ol>
    <li>Uncovering the molecular basis of life through research</li>
    <li>Providing research infrastructure and services</li>
    <li>Training and inspiring the next generation of scientists</li>
    <li>Driving research, innovation and progress through technology development</li>
    <li>Interactions with industry and technology transfer</li>
    <li>Playing a leading role in the integration of life science research</li>
  </ol>
  <h3 id="further-examples-of-bullets">Further examples of bullets</h3>
  <ul>
    <li>A bulleted item</li>
    <li>A nested bulleted item</li>
    <li>A nested bulleted item</li>
    <li>A bulleted item</li>
    <li>A bulleted item</li>
    <li>A bulleted item</li>
    <li>A bulleted item</li>
  </ul>
  <h3 id="definition-lists">Definition lists</h3>
  <dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
  </dl>


  <table>
    <thead>
      <tr>
        <th scope="col">Event</th>
        <th scope="col">Date</th>
        <th scope="col">Type</th>
        <th scope="col">Location</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>dave</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
        <td>roger</td>
        <td>London, U.K.</td>
      </tr>
      <tr>
        <td>dave</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
        <td>roger</td>
        <td>London, U.K.</td>
      </tr>
      <tr>
        <td>dave</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
        <td>roger</td>
        <td>London, U.K.</td>
      </tr>
    </tbody>
  </table>

  <h3>What is EMBL?</h3>
  <p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
  <p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>

  <figure>
    <img src="../../assets/vf-figure/assets/figure-example.png" alt="An example figure image" loading="lazy">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
  </figure>

  <figure>
    <img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20201202_hero_emblorg_homepage-zoom-out.jpg" alt="An example figure image" loading="lazy">
    <figcaption>A very wide image.</figcaption>
  </figure>

  <p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
  <p>Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.</p>

  <h2>Section 2: EMBL’s goals</h2>

  <h3>Goal 1: Advancing society</h3>
  <p>The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.</p>

  <h4>Communications goals:</h4>
  <p>Show the impact of our work in tackling society’s big challenges</p>

  <h3>Goal 2: Enable excellent science to advance our understanding of life</h3>
  <p>We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.</p>

  <h4>Communications goals:</h4>
  <ul>
    <li>Develop and sustain support for EMBL from important stakeholders</li>
    <li>Attract the best scientists, engineers, technicians and support staff</li>
    <li>Inform scientists about training opportunities and services</li>
  </ul>

  <blockquote>
    <p>We are a group of user experience specialists in an international scientific organisation</p>
    <p>Our aim is to help teams design services to meet the needs of their users</p>
    <p>We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation</p>
    <p><cite>EMBl-EBI Web Development UX Team Mission</cite></p>
  </blockquote>

  <figure>
    <img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab" loading="lazy">
    <figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
  </figure>

</div>
              

Examples

Installation info

This component is distributed with npm. After installing npm, you can install the vf-content with this command.

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

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-content/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.6.7

  • Add support for definition lists.

1.6.3

  • Dependency bumps.

1.6.2

  • Dependency bumps.

1.6.1

  • Dependency bumps.

1.6.0

  • Use vf-spacing tokens for heading margins.
  • Reduce bottom margin on headings to be more consistent with overall typography, design kit.
  • https://github.com/visual-framework/vf-core/pull/1589
  • Darken and increase figure text size
  • https://github.com/visual-framework/vf-core/issues/1582
  • Figures take a responsive and centered layout, which is most typical.
  • https://github.com/visual-framework/vf-core/issues/1583

1.5.6

  • Adds support for responsive img and figure elements
  • https://github.com/visual-framework/vf-core/issues/1412

1.5.4

  • dependency bump

1.5.2

  • Remove author information from example, as we have a dedicated vf-article-meta-information component.
  • Fix blockquote bottom margin.

1.5.1

  • Fixes a bug with a non-existent @visual-framework/form was required.

1.5.0

  • changes the dev dependencies to match their new names and versions

1.4.1

  • Removes the 'dark mode' CSS for links - as it's not implemented.
  • changes any set- style functions to cleaner version

1.4.0

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

1.3.2

  • dependency bump

1.3.0

  • updates spacing design tokens
  • requires v2.0.0 of the vf-design-tokens package or newer

1.2.2

  • dependency bump

1.2.0

  • adds loading="lazy" to the img element for better performance

1.1.9

  • dependency bump

1.1.7

  • fixes an issue when content creators add the bold/strong tags to hedaing to make them bolder - when they shouldn't be
  • adds a little more padding to ul and ol elements so they visually fit 'inside' of vf-content

1.1.4

  • fixes support for vf-figure alignment options

1.1.1

  • adds a floated vf-figure example in the nunjucks file
  • adds CSS for margin spacing of vf-figure inside of vf-content
  • adds table styles to match default vf-table with striped rows

1.1.0

  • vf-content becomes less of a utility and a general purpose for long-form content
  • Standardise links colours
  • Add intial support for --dark links

1.0.8

  • Add support for cite, figcaption
  • Improve spacing on blockquote

1.0.3

  • Lerna version bump

1.0.1

  • Lerna version bump

1.0.0

  • Initial stable release

Assets



File system location: components/vf-content

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