News Container
Use this component to show a section of news content. It also offers a vf-news-container--featured
variant with support for vf-summary
for when news is a higher level and, well, featured content on layout.
22 June 2018
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
22 June 2018
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
22 June 2018
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
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 (exampe), 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",
"section-title": "Latest Press Releases"
}
%}
{% include "../path_to/vf-news-container/vf-news-container.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-news-container', {
"component-type": "container",
"section-title": "Latest Press Releases"
} %}
HTML
<section class="vf-news-container | embl-grid">
<div class="vf-section-header">
<h2 class="vf-section-header__heading">Projects</h2>
</div>
<div class="vf-news-container__content">
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="../../assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy">
<h3 class="vf-summary__title">
<a href="JavaScript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="../../assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy">
<h3 class="vf-summary__title">
<a href="JavaScript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="../../assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy">
<h3 class="vf-summary__title">
<a href="JavaScript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
</div>
</section>
22 June 2018
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
22 June 2018
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
22 June 2018
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
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 (exampe), 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",
"section-title": "Latest Press Releases"
}
%}
{% include "../path_to/vf-news-container/vf-news-container.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-news-container', {
"component-type": "container",
"section-title": "Latest Press Releases"
} %}
HTML
<section class="vf-news-container vf-news-container--featured | embl-grid">
<div class="vf-section-header">
<h2 class="vf-section-header__heading">Projects</h2>
</div>
<div class="vf-news-container__content vf-grid">
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="../../assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy">
<h3 class="vf-summary__title">
<a href="JavaScript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="../../assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy">
<h3 class="vf-summary__title">
<a href="JavaScript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="../../assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy">
<h3 class="vf-summary__title">
<a href="JavaScript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
</div>
</section>
Installation info
This component is distributed with npm. After installing npm, you can install the vf-news-container
with this command.
$ yarn add --dev @visual-framework/vf-news-container
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-news-container/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.23
- small change to cards on homepage
1.0.18
1.0.17
1.0.16
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
1.0.6
- begin to make more pattern/boilerplate guidance
- minor templating updates
1.0.5
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-news-container