Content live

Open the above preview in a new window: With layout Open Component only Open

Content Area Component

npm version

About

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

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

Install

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

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.

Component information

  • Handle: @vf-content
  • Filesystem path: components/vf-content/vf-content.njk
  • Referenced by 1 components: @vf-inlay

Code example

<div class="vf-content">
    <h1 id="embl-communications-strategy-2018-2020">EMBL communications strategy 2018-2020</h1>

    <small>Cian O'Luanaigh, 2 July 2018 at 12:55 pm</small>
    <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>

    <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 class="vf-figure | vf-figure--float vf-figure--float-inline-end">
        <img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text">
        <figcaption class="vf-figure__caption">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>
    <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">
        <figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
    </figure>

</div>

Resources and files

          # Change Log

## 1.1.5

* fixes an issue when content creators add the bold/strong tags to hedaing to make them bolder - when they shouldn't be.

## 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 (2020-01-24)

* Lerna version bump

## 1.0.1 (2019-12-18)

* Lerna version bump

## 1.0.0 (2019-12-17)

* Initial stable release

        

File information

          // setup files required

@import 'vf-global-variables';
@import 'vf-variables';
@import 'vf-functions';
@import 'vf-mixins';
@import 'vf-utility-mixins';
// other components being used

@import 'vf-heading/vf-heading.scss';
@import 'vf-badge/vf-badge.scss';
@import 'vf-text/vf-text.scss';
@import 'vf-link/vf-link.scss';
@import 'vf-form__core/vf-form__core.scss';
@import 'vf-button/vf-button.scss';
@import 'vf-figure/vf-figure.scss';
@import 'vf-list/vf-list.scss';
@import 'vf-blockquote/vf-blockquote.scss';
@import 'vf-divider/vf-divider.scss';
@import 'vf-box/vf-box.scss';

// component specific styles

@import 'vf-content.scss';

        

File information

          {
  "version": "1.1.4",
  "name": "@visual-framework/vf-content",
  "description": "vf-content component",
  "homepage": "https://visual-framework.github.io/vf-core/",
  "author": "VF",
  "license": "Apache 2.0",
  "style": "vf-content.css",
  "sass": "index.scss",
  "test": "echo \"Error: no test specified\" && exit 1",
  "publishConfig": {
    "access": "public"
  },
  "repo": "https://github.com/visual-framework/vf-core/tree/master/components/containers/vf-content",
  "bugs": {
    "url": "https://github.com/visual-framework/vf-core/issues/new"
  },
  "dependencies": {
    "@visual-framework/vf-badge": "^1.0.1",
    "@visual-framework/vf-blockquote": "^1.0.2",
    "@visual-framework/vf-box": "^1.0.4",
    "@visual-framework/vf-button": "^1.0.3",
    "@visual-framework/vf-divider": "^1.0.0",
    "@visual-framework/vf-figure": "^1.2.0",
    "@visual-framework/vf-form__core": "^1.0.3",
    "@visual-framework/vf-heading": "^1.0.0",
    "@visual-framework/vf-link": "^1.0.3",
    "@visual-framework/vf-list": "^1.0.0",
    "@visual-framework/vf-text": "^1.0.2"
  },
  "keywords": [
    "fractal",
    "component"
  ],
  "gitHead": "02bba9ce4ec9b5cf77b52b02a7a34e08673af691"
}

        

File information

          // vf-content

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

// we use `not([class*='vf-'])` to ensure we only apply styling where a
// vf-* class hasn't been able to be applied

.vf-content {

  h1:not([class*='vf-']) {
    @include set-type(text-heading--1, $custom-margin-bottom: 0);

    + small {
      margin-bottom: 35px;
      margin-top: 22px;
    }

    b,
    strong {
      font-weight: inherit;
    }
  }

  h2:not([class*='vf-']) {
    @include set-type(text-heading--2, $custom-margin-bottom: 39px);

    margin-top: 0;
    padding-top: 13px;

    b,
    strong {
      font-weight: inherit;
    }
  }

  h3:not([class*='vf-']) {
    @include set-type(text-heading--3, $custom-margin-bottom: 13px);

    margin-top: 24px;

    b,
    strong {
      font-weight: inherit;
    }
  }

  h4:not([class*='vf-']) {
    @include set-type(text-heading--4, $custom-margin-bottom: 13px);

    margin-top: 24px;

    b,
    strong {
      font-weight: inherit;
    }
  }

  h5:not([class*='vf-']) {
    @include set-type(text-heading--5, $custom-margin-bottom: 13px);

    margin-top: 24px;

    b,
    strong {
      font-weight: inherit;
    }
  }

  h6:not([class*='vf-']) {
    @include set-type(text-heading--5, $custom-margin-bottom: 13px);

    margin-top: 24px;

    b,
    strong {
      font-weight: inherit;
    }
  }

  p:not([class*='vf-']) {
    @include set-type(text-body--2, $custom-margin-bottom: 24px);
  }

  .vf-link,
  a:not([class*='vf-']) {
    @include inline-link(
      $vf-link--hover-color: $vf-link--hover-color,
      $vf-link--visited-color: set-color(vf-color--purple),
      $vf-include-normalisations: true
    );
  }

  small:not([class*='vf-']) {
    @include set-type(text-body--5);

    display: block;
  }

  ol:not([class*='vf-']) {
    @include list(vf-list--ordered, ordered);
  }

  ul:not([class*='vf-']) {
    @include list(vf-list--unordered, unordered);
  }

  li:not([class*='vf-']) {
    @include set-type(text-body--2);

    margin-bottom: map-get($vf-spacing-map, vf-spacing--sm);

    > ul:not([class*='vf-']),
    > ol:not([class*='vf-']) {
      margin-top: map-get($vf-spacing-map, vf-spacing--sm);
    }
  }

  li:not([class*='vf-']):last-of-type {
    margin-bottom: map-get($vf-spacing-map, vf-spacing--md);
  }

  hr:not([class*='vf-']) {
    @include divider;
  }

  code:not([class*='vf-']) {
    background: set-color(vf-ui-color--off-white);
    padding-left: 3px;
    padding-right: 3px;
  }

  blockquote:not([class*='vf-']) {
    @include blockquote;

    p:last-of-type:not([class*='vf-']) {
      margin-bottom: 0;
    }
  }

  table:not([class*='vf-']) {
    background-color: set-ui-color(vf-ui-color--white);
    border-collapse: collapse;

    caption {
      @include set-type(text-heading--4);

      text-align: left;
    }

    thead {
      background-color: set-color(vf-color--grey--lightest);

      th {
        @include set-type(text-heading--5, $custom-margin-bottom: 0);

        padding: 8px 16px;
        text-align: left;
      }
    }

    td {
      @include set-type(text-body--2, $custom-margin-bottom: 0);

      padding: 8px 16px;
      text-align: left;
      vertical-align: top;
    }

    tr:nth-of-type(even) {
      background-color: set-ui-color(vf-ui-color--grey--light);
    }
    tfoot {
      background-color: set-color(vf-color--grey--lightest);
      border-top: 1px solid set-ui-color(vf-ui-color--black);

      td {
        padding: 8px 16px;
      }
    }
  }

  figcaption:not([class*='vf-']),
  cite:not([class*='vf-']) {
    // matches @mixin figure, but that is not directly usable here as it requires css classes
    @include set-type(text-body--5);
    color: map-get($vf-colors-map, vf-color--grey);
    font-style: italic;
  }

  .vf-video {
    // TODO: Make a function for vf-spacing map
    margin-bottom: 32px;
  }

  .vf-figure--align-inline-start {
    margin-bottom: 32px;
    margin-right: 32px;
  }
  .vf-figure--align-inline-end {
    margin-bottom: 32px;
    margin-left: 32px;
  }
}

.vf-content__standfirst {
  font-size: 21px;
  line-height: 31px;
  margin-bottom: 46px;
  margin-top: 0;

  + .vf-content__standfirst {
    margin-bottom: 24px;
  }

  + small {
    margin-bottom: 42px;
  }
}


[class*='--dark'].vf-content,
.vf-content > [class*='dark'] {
  .vf-link,
  a:not([class*='vf-']) {
    @include inline-link(
      $vf-link--dark-mode--hover-color,
      $vf-link--dark-mode--hover-color,
      set-color(vf-color--purple--light),
      $vf-include-normalisations: true
    );
  }
}

        

File information

          # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


"@visual-framework/vf-badge@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-badge/-/vf-badge-1.0.0-beta.1.tgz#68336b1273406987ea69a37ce13eac54e4fdb493"
  integrity sha512-dsrzv9UI2Tbi1lUcwma4mAFYTBBTDEgymQSuVF9fLDVCHWVHjMxbTn9+H2KSTq/Tt/Of6fEReNDMbta9XjEGXg==

"@visual-framework/vf-blockquote@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-blockquote/-/vf-blockquote-1.0.0-beta.1.tgz#2437d6ba7fda68435cf085a05f369eba768ef9d5"
  integrity sha512-wH/6L2YpTZPhW3Qxq/nEfs6LJykPTRwCLBCRGy80EHjEo4V9oFT1ILRIUyW/x1etuEF5y0D6BYvutmLtUiqEhg==

"@visual-framework/vf-box@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-box/-/vf-box-1.0.0-beta.1.tgz#55f32cac47faf46a842e2f7785847d2e501d119c"
  integrity sha512-NoTqHWu/om6NwU6R5aRZt0ZvcjnFUroE+VWVAG2Y4TIZNum+BumK+GbxbskAMXoIoBllVuMG3c1e92RWuZqSjw==

"@visual-framework/vf-button@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-button/-/vf-button-1.0.0-beta.1.tgz#9d51bad38eaf904b57e141abb0fe4744d16250ec"
  integrity sha512-dldMmvE5fVOVu/+2SB2Bvgb1EgX74v2CwoeMGFr2Q8HOPoLita4/d5ynr3514M7mc+HvMEZ5Z3mcNOfokpAdhQ==

"@visual-framework/vf-divider@^1.0.0-rc.1":
  version "1.0.0-rc.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-divider/-/vf-divider-1.0.0-rc.1.tgz#7c4c96dff7fd59d55cd788a93997d060f95fa65a"
  integrity sha512-Q82mtI6M56kb7dPgd9czpU7+0kazOO63n20V4nWl0OcGNkXmFfTKg92dvsd67q6lJmIz1qF3hQnp/LJUA71dDQ==

"@visual-framework/vf-figure@^1.0.0-alpha.1":
  version "1.0.0-alpha.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-figure/-/vf-figure-1.0.0-alpha.1.tgz#d10e850b33f3de5f2226c47735e43f4d6122199f"
  integrity sha512-xqYUzqy2jffPNBvvq/LjKdLy/tWOuUcMMs+5Eax16Ij7U6mdj3BwKP4Y1Wj17D+/fjYmO5tmwLJmS8VWG7FZDw==

"@visual-framework/vf-form__checkbox@^0.0.38":
  version "0.0.38"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__checkbox/-/vf-form__checkbox-0.0.38.tgz#a537f2c19172f8b5c7617e837996a1190a2f2dbf"
  integrity sha512-81pTnnesEpBfx3k+IuRhZv45XLC3UDX+yQ2cTrPVsLchsY14QXfe3h9TovM+WQV1uyExcDOO/QMeIrV/Nji66A==
  dependencies:
    "@visual-framework/vf-form__item" "^0.0.38"
    "@visual-framework/vf-form__label" "^0.0.34"

"@visual-framework/vf-form__core@^1.0.0-alpha.1":
  version "1.0.0-alpha.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__core/-/vf-form__core-1.0.0-alpha.1.tgz#6d9f8577659a0225756c5f1c43cff85b2f938e06"
  integrity sha512-qUh2d7JSHT6JQws94b3fLowzTvyxouVhKlSPrx/IOjd0Mb42sP7xjMSTkqu/jttn4S2dKtCr7qwaT7eMHSYV0Q==
  dependencies:
    "@visual-framework/vf-form__checkbox" "^0.0.38"
    "@visual-framework/vf-form__helper" "^0.0.37"
    "@visual-framework/vf-form__input" "^0.0.38"
    "@visual-framework/vf-form__item" "^0.0.38"
    "@visual-framework/vf-form__label" "^0.0.34"
    "@visual-framework/vf-form__radio" "^0.0.34"
    "@visual-framework/vf-form__select" "^0.0.34"
    "@visual-framework/vf-form__textarea" "^0.0.34"

"@visual-framework/vf-form__helper@^0.0.37":
  version "0.0.37"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__helper/-/vf-form__helper-0.0.37.tgz#957c59e0cb889481503fc2b553331e26b639bd95"
  integrity sha512-tTPVJ5DmN0RmyJmPk8YvSD+NKSJPyht2MjTe+h4I1AdyNir9PtZAYvsO1RjwiMM3kohbEr1uU4iecCLnau1LBw==

"@visual-framework/vf-form__input@^0.0.38":
  version "0.0.38"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__input/-/vf-form__input-0.0.38.tgz#0645a3d7aa7d88f9db9007be93aeb2b9277010bf"
  integrity sha512-WHKV73AWMuI60WbRSHY7hQHjI38JqNrHwcLKPC4HeL8tOfuTlI1DHwq2tri4xF4F8Px57UjYao4554dWogq4CA==
  dependencies:
    "@visual-framework/vf-form__item" "^0.0.38"
    "@visual-framework/vf-form__label" "^0.0.34"

"@visual-framework/vf-form__item@^0.0.38":
  version "0.0.38"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__item/-/vf-form__item-0.0.38.tgz#6966825b88af016bc60460884bb679250bb97758"
  integrity sha512-ATPUM/Hvq+a736UYHT4jPzHvZjmgr41ei5SerRmUG1W4Qa8tbpRlqlzphPd/TF0eeG+PkUmqyVxos7CUbzpUSA==
  dependencies:
    "@visual-framework/vf-form__helper" "^0.0.37"
    "@visual-framework/vf-form__label" "^0.0.34"

"@visual-framework/vf-form__label@^0.0.34":
  version "0.0.34"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__label/-/vf-form__label-0.0.34.tgz#b3b996b477cfef4e8f9414abce5018e5a7c1353e"
  integrity sha512-QdwSEptrdlqTLbX0/4gYU2yrBzPt6Ulke0hsnvl3KMG4l0tDU3/+mDS9FsboYxG57P3HxvC4moRuDNea/dXqJQ==

"@visual-framework/vf-form__radio@^0.0.34":
  version "0.0.34"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__radio/-/vf-form__radio-0.0.34.tgz#61869fe4d2ab3d50adfc6204e331e477a97d1238"
  integrity sha512-5le17FcJ00P/6zNtty6Jc5NGwOFWK0fP8Nk7MGK9u97XZsiOul4dMSiY3Vvp1DpqBdJaWrLLvAnp0ckcm/pX8A==

"@visual-framework/vf-form__select@^0.0.34":
  version "0.0.34"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__select/-/vf-form__select-0.0.34.tgz#e4ff83ff9dabf3387a7d8862cd0f065aa5c22bde"
  integrity sha512-rK73E/FTVSVfz+RgNg8OCo8T34wcE3rfevNydSk3AoNQTnISgmXICjlmwSp373aA6OyhrYosgC9ijkZYaFNQtA==

"@visual-framework/vf-form__textarea@^0.0.34":
  version "0.0.34"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-form__textarea/-/vf-form__textarea-0.0.34.tgz#920d7546523d5f054d4141ad655a0d3d46af5676"
  integrity sha512-L7lOhctCwBgEnbVWIe4sENLccJT8l/ZIcSDmKkFY9aBcnnVcnjZ3M5u/oJCi4VuVIORgCBCbHxnb3dRTL7Zfsw==

"@visual-framework/vf-heading@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-heading/-/vf-heading-1.0.0-beta.1.tgz#9dd06d3db8f30bf398405126312bb4b87ca3a3e2"
  integrity sha512-pt9ZlyIpFPp9bqbea3G0MzYUJSy8hpd6dXlFnmnTRv3QFYilqZnTcHzvRKRMwmIxziZwEyKKh5x5Rwir4dMeyA==

"@visual-framework/vf-link@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-link/-/vf-link-1.0.0-beta.1.tgz#e53cbda9b24f52a3e9d280c8b00857ac7b334e2d"
  integrity sha512-tp9cJzkoxcora69GAymLX5506rsJU/NQ1yLKLKvF6H4oKO4B9GmGA3SbUXTMxRX4f5QTdDXq2mN6K4xglCqbkg==

"@visual-framework/vf-list@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-list/-/vf-list-1.0.0-beta.1.tgz#2642ebe44e7d0825340f95b0e0e1a8c156648555"
  integrity sha512-5pfgj1Fi9ND6KR9/MdyW6PAG0HFN6dPqjBziVmWNwwFXhZdWFDK171A5htYWuuFy5XIrAUaYuKTHkx8GVxTN/A==

"@visual-framework/vf-text@^1.0.0-beta.1":
  version "1.0.0-beta.1"
  resolved "https://registry.yarnpkg.com/@visual-framework/vf-text/-/vf-text-1.0.0-beta.1.tgz#d2039c2bdf0918381d5925a03d57c708e70d7e7b"
  integrity sha512-WMMl734NU3CDKH9ivwVQS1MEfMPQEZ80yrzpVBXehMVjA+pUqvCfis6+0TbHKjiNc0qgfNHmHuSQVRoyEV52Ig==

        

File information

All the components

Grids

Put stuff in columns.

Grid

Page Grid

Inlay


Elements

The micro elements of the component library.

Badges

Blockquote

Button

Collapse

Divider

Explainer

Favicon

Figure

Headings

Link

Lists

Logo

No JS

Text


Blocks

Simple components like sections headers, galleries and so on.

Activity List

Article Meta Information

Box

Breadcrumbs

Card

Code Example

Discussion

Embed

Footer

Global Header

Lede

Links List

Masthead

Navigation

Page Header

Pagination

Search

Section Header

Social icons

Summary

Table

Tabs

Tree

Video

Video Teaser


Container

More complex components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EBI Header and Footer

Acivity List Group

Banner

Card Container

Content

Forms

Header

Hero

Intro

News Container

Summary Container

Video Container


Boilerplates

Whole-page templates that are a collection of many components.

VF Boilerplate


Utilities

Utility classes to help where neeed.

EBI-VF 1.x Compatibility Component

EMBL Notifications

Google Analytics enhancements

Visual Framework Componet Rollup

Design Tokens

Plex Mono Font

Plex Sans Font

JS Polyfill

Sass config

Full Bleed

Utility classes


EMBL Grids

EMBLs way to put stuff in columns.

EMBL Grid


EMBL Elements

EMBLs micro elements of the component library.

EMBL Conditional Edit

EMBL Favicon

EMBL Logo


EMBL Blocks

Simple components from EMBL like sections headers, galleries and so on.

EMBL Breadcrumbs

EMBL Content meta properties


EMBL Containers

More complex EMBL components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EMBL ContentHub Loader


EMBL Boilerplates

Whole-page templates that are a collection of many components.


Deprecated

These components are no longer maintained.

Deprecated pattern

Sass utilities