Skip to main content

Articles

The article component contains media, title, metadata and excerpt.

Featured article

Below is a featured article placed at the top of the page to add emphasis to a chosen item. The featured article should only appear once on a page.

<article class="ons-article ons-article--featured ">
  <div class="ons-container">
    <div class="ons-grid ons-u-pt-l ons-u-pb-l">
      <div class="ons-grid__col ons-col-5@m">
        <div class="ons-article__image" aria-hidden="true">
          <a class="ons-article__image-link" href="#0" tabindex="-1">
            <img height="248" width="379" srcset="/img/small/placeholder-news-medium.png 1x, /img/large/placeholder-news-medium.png 2x" src="/img/small/placeholder-news-medium.png" alt="Image placeholder" loading="lazy">
          </a>
        </div>
      </div>
      <div class="ons-grid__col ons-col-7@m">
        <div class="ons-article__content">
          <h2 class="ons-article__heading">
            <a href="#0">For the first time the ONS is using administrative data to count number of rooms</a>
          </h2>
          <ul class="ons-u-fs-s ons-article__meta">
            <li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="2020-05-20">20 May 2020</time></li>
            <li class="ons-article__meta-item">
              <span class="ons-u-hidden">in </span>
              <a class="ons-article__meta-link" href="#0">Press releases</a>
            </li>
          </ul>
          <p class="ons-u-mb-no">Earlier this year, we asked people who use census data what they thought of our plans for 2021 Census outputs.</p>
        </div>
      </div>
    </div>
  </div>
</article>
{% from "components/articles/_macro.njk" import onsArticles %}
{{ onsArticles({
    "articles": [
        {
            "featured": true,
            "url": '#0',
            "title": 'For the first time the ONS is using administrative data to count number of rooms',
            "date": {
                "short": '20 May 2020',
                "iso": '2020-05-20'
            },
            "category": {
                "title": 'Press releases',
                "url": '#0'
            },
            "excerpt": 'Earlier this year, we asked people who use census data what they thought of our plans for 2021 Census outputs.'
        }
    ]
}) }}
Name Type Required Description
title string true The title for the article
excerpt string true A short extract of text (for example, a short sentence to give some context of the article)
url string true The url for the link
featured boolean false Will render a featured version of the article if set to true
classes string false Custom classes to add to the article
image Image false An object containing path and filename attributes for the image
date Date true An object containing friendly date and system date formats
category Category true An object containing category name and url

Image

Name Type Required Description
smallSrc string true Path to the non-retina version of the image
largeSrc string true Path to the retina version of the image
alt string true Alt tag to explain the appearance and function of the image

Date

Name Type Required Description
short string true Short format of the date (for example, 20 May 2020)
iso string true ISO format of the date (for example, 2020-05-20)

Category

Name Type Required Description
title string true Category in which this article is associated (for example, Press releases)
url string false The url for the category
{% macro onsArticles(params) %}


    {% for article in (params.articles if params.articles is iterable else params.articles.items()) %}
    <article class="ons-article{% if article.featured %} ons-article--featured {% endif %}{{ ' ' + params.classes if params.classes else '' }}">


        {% if article.featured is defined and article.featured %}
        <div class="ons-container">
            <div class="ons-grid ons-u-pt-l ons-u-pb-l">
                <div class="ons-grid__col ons-col-5@m">
                {% endif %}

                    <div class="ons-article__image" aria-hidden="true">

                        <a class="ons-article__image-link" href="{{ article.url }}" tabindex="-1">

                            {% if article.featured is defined and article.featured %}

                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
                                    <img height="248" width="379" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
                                {% else %}
                                    <img height="248" width="379" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news-medium.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png" alt="Image placeholder" loading="lazy">
                                {% endif %}

                            {% else %}

                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
                                    <img height="92" width="140" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
                                {% else %}
                                    <img height="92" width="140" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png" alt="Image placeholder" loading="lazy">
                                {% endif %}

                            {% endif %}

                        </a>

                    </div>

                {% if article.featured is defined and article.featured %}
                </div>
                <div class="ons-grid__col ons-col-7@m">
                {% endif %}

                    <div class="ons-article__content">

                        <h2 class="ons-article__heading">
                            <a href="{{ article.url }}">{{ article.title }}</a>
                        </h2>

                        <ul class="ons-u-fs-s ons-article__meta">
                            {%- if article.date is defined and article.date %}<li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="{{ article.date.iso }}">{{ article.date.short }}</time></li>{% endif %}
                            {%- if article.category is defined and article.category %}
                                <li class="ons-article__meta-item">
                                    <span class="ons-u-hidden">in </span> 
                                    {%- if article.category.url is defined and article.category.url %}
                                        <a class="ons-article__meta-link" href="{{ article.category.url }}">{{ article.category.title }}</a>
                                    {% else %}
                                        {{ article.category.title }}
                                    {% endif %}
                                </li>
                            {% endif %}
                        </ul>

                        {% if article.excerpt is defined and article.excerpt %}
                        <p class="ons-u-mb-no">{{ article.excerpt | safe }}</p>
                        {% endif %}

                    </div>

                {% if article.featured is defined and article.featured %}
                </div>
            </div>
        </div>
        {% endif %}


    </article>
    {% endfor %}

{% endmacro %}
.ons-article {
  @include mq(s) {
    align-items: flex-start;
    display: flex;
  }

  & + & {
    border-top: 1px solid $color-grey-75;
    margin: 1.5rem 0 0;
    padding: 1.5em 0 0;
  }

  &__content {
    max-width: 660px; // Equivalent to 8 Columns;
  }

  &__image {
    flex-shrink: 0;
    margin-bottom: 1rem;
    max-width: 140px;

    @include mq(s) {
      display: flex;
      margin-bottom: 0;
      margin-right: 1.5rem;
    }
  }

  &__image-link {
    box-sizing: border-box;
    display: inline-block;
    outline-offset: 0;
    vertical-align: top;

    &:focus {
      box-shadow: 0 0 0 2px $color-black !important;
      outline: 4px solid $color-focus !important;
      outline-offset: 2px;
    }
  }

  &__meta {
    color: $color-grey-100;
    display: flex;
    margin-bottom: 1rem;
    padding-left: 0;

    &-item {
      display: block;
      margin: 0 1rem 0 0;
      padding-left: 0;
    }

    &-link {
      color: inherit;

      &:hover {
        color: $color-black;
        text-decoration: underline solid $color-black 2px;
      }
    }
  }

  // Featured
  &--featured {
    background-color: $color-grey-5;
    border-top: 0;
    padding-bottom: 0;
    padding-top: 0;

    .ons-article__image {
      margin-bottom: 1.5rem;
      margin-right: 0;
      max-width: 379px;

      @include mq(m) {
        margin-bottom: 0;
        margin-right: 1.5rem;
      }
    }

    .ons-article__image img {
      width: 100%;
    }
  }
}

Single article

<article class="ons-article">
  <div class="ons-article__image" aria-hidden="true">
    <a class="ons-article__image-link" href="#0" tabindex="-1">
      <img height="92" width="140" srcset="/img/small/placeholder-news.png 1x, /img/large/placeholder-news.png 2x" src="/img/small/placeholder-news.png" alt="Image placeholder" loading="lazy">
    </a>
  </div>
  <div class="ons-article__content">
    <h2 class="ons-article__heading">
      <a href="#0">Find out what users told us about our plans for 2021 Census Outputs</a>
    </h2>
    <ul class="ons-u-fs-s ons-article__meta">
      <li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="2020-05-20">20 May 2020</time></li>
      <li class="ons-article__meta-item">
        <span class="ons-u-hidden">in </span>
        <a class="ons-article__meta-link" href="#0">Press releases</a>
      </li>
    </ul>
    <p class="ons-u-mb-no">Earlier this year, we asked people who use census data what they thought of our plans for 2021 Census outputs.</p>
  </div>
</article>
{% from "components/articles/_macro.njk" import onsArticles %}
{{ onsArticles({
    "articles": [
        {
            "url": '#0',
            "title": 'Find out what users told us about our plans for 2021 Census Outputs',
            "date": {
                "short": '20 May 2020',
                "iso": '2020-05-20'
            },
            "category": {
                "title": 'Press releases',
                "url": '#0'
            },
            "excerpt": 'Earlier this year, we asked people who use census data what they thought of our plans for 2021 Census outputs.'
        }
    ]
}) }}
Name Type Required Description
title string true The title for the article
excerpt string true A short extract of text (for example, a short sentence to give some context of the article)
url string true The url for the link
featured boolean false Will render a featured version of the article if set to true
classes string false Custom classes to add to the article
image Image false An object containing path and filename attributes for the image
date Date true An object containing friendly date and system date formats
category Category true An object containing category name and url

Image

Name Type Required Description
smallSrc string true Path to the non-retina version of the image
largeSrc string true Path to the retina version of the image
alt string true Alt tag to explain the appearance and function of the image

Date

Name Type Required Description
short string true Short format of the date (for example, 20 May 2020)
iso string true ISO format of the date (for example, 2020-05-20)

Category

Name Type Required Description
title string true Category in which this article is associated (for example, Press releases)
url string false The url for the category
{% macro onsArticles(params) %}


    {% for article in (params.articles if params.articles is iterable else params.articles.items()) %}
    <article class="ons-article{% if article.featured %} ons-article--featured {% endif %}{{ ' ' + params.classes if params.classes else '' }}">


        {% if article.featured is defined and article.featured %}
        <div class="ons-container">
            <div class="ons-grid ons-u-pt-l ons-u-pb-l">
                <div class="ons-grid__col ons-col-5@m">
                {% endif %}

                    <div class="ons-article__image" aria-hidden="true">

                        <a class="ons-article__image-link" href="{{ article.url }}" tabindex="-1">

                            {% if article.featured is defined and article.featured %}

                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
                                    <img height="248" width="379" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
                                {% else %}
                                    <img height="248" width="379" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news-medium.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png" alt="Image placeholder" loading="lazy">
                                {% endif %}

                            {% else %}

                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
                                    <img height="92" width="140" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
                                {% else %}
                                    <img height="92" width="140" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png" alt="Image placeholder" loading="lazy">
                                {% endif %}

                            {% endif %}

                        </a>

                    </div>

                {% if article.featured is defined and article.featured %}
                </div>
                <div class="ons-grid__col ons-col-7@m">
                {% endif %}

                    <div class="ons-article__content">

                        <h2 class="ons-article__heading">
                            <a href="{{ article.url }}">{{ article.title }}</a>
                        </h2>

                        <ul class="ons-u-fs-s ons-article__meta">
                            {%- if article.date is defined and article.date %}<li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="{{ article.date.iso }}">{{ article.date.short }}</time></li>{% endif %}
                            {%- if article.category is defined and article.category %}
                                <li class="ons-article__meta-item">
                                    <span class="ons-u-hidden">in </span> 
                                    {%- if article.category.url is defined and article.category.url %}
                                        <a class="ons-article__meta-link" href="{{ article.category.url }}">{{ article.category.title }}</a>
                                    {% else %}
                                        {{ article.category.title }}
                                    {% endif %}
                                </li>
                            {% endif %}
                        </ul>

                        {% if article.excerpt is defined and article.excerpt %}
                        <p class="ons-u-mb-no">{{ article.excerpt | safe }}</p>
                        {% endif %}

                    </div>

                {% if article.featured is defined and article.featured %}
                </div>
            </div>
        </div>
        {% endif %}


    </article>
    {% endfor %}

{% endmacro %}
.ons-article {
  @include mq(s) {
    align-items: flex-start;
    display: flex;
  }

  & + & {
    border-top: 1px solid $color-grey-75;
    margin: 1.5rem 0 0;
    padding: 1.5em 0 0;
  }

  &__content {
    max-width: 660px; // Equivalent to 8 Columns;
  }

  &__image {
    flex-shrink: 0;
    margin-bottom: 1rem;
    max-width: 140px;

    @include mq(s) {
      display: flex;
      margin-bottom: 0;
      margin-right: 1.5rem;
    }
  }

  &__image-link {
    box-sizing: border-box;
    display: inline-block;
    outline-offset: 0;
    vertical-align: top;

    &:focus {
      box-shadow: 0 0 0 2px $color-black !important;
      outline: 4px solid $color-focus !important;
      outline-offset: 2px;
    }
  }

  &__meta {
    color: $color-grey-100;
    display: flex;
    margin-bottom: 1rem;
    padding-left: 0;

    &-item {
      display: block;
      margin: 0 1rem 0 0;
      padding-left: 0;
    }

    &-link {
      color: inherit;

      &:hover {
        color: $color-black;
        text-decoration: underline solid $color-black 2px;
      }
    }
  }

  // Featured
  &--featured {
    background-color: $color-grey-5;
    border-top: 0;
    padding-bottom: 0;
    padding-top: 0;

    .ons-article__image {
      margin-bottom: 1.5rem;
      margin-right: 0;
      max-width: 379px;

      @include mq(m) {
        margin-bottom: 0;
        margin-right: 1.5rem;
      }
    }

    .ons-article__image img {
      width: 100%;
    }
  }
}

Multiple articles

<article class="ons-article">
  <div class="ons-article__image" aria-hidden="true">
    <a class="ons-article__image-link" href="#0" tabindex="-1">
      <img height="92" width="140" srcset="/img/small/placeholder-news.png 1x, /img/large/placeholder-news.png 2x" src="/img/small/placeholder-news.png" alt="Image placeholder" loading="lazy">
    </a>
  </div>
  <div class="ons-article__content">
    <h2 class="ons-article__heading">
      <a href="#0">A new approach to counting rooms and bedrooms</a>
    </h2>
    <ul class="ons-u-fs-s ons-article__meta">
      <li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="2020-05-20">20 May 2020</time></li>
      <li class="ons-article__meta-item">
        <span class="ons-u-hidden">in </span>
        <a class="ons-article__meta-link" href="#0">Press releases</a>
      </li>
    </ul>
    <p class="ons-u-mb-no">As part of preparations for the 2021 Census, Andy Teague explains how ONS will be estimating the number of rooms and bedrooms at an address.</p>
  </div>
</article>
<article class="ons-article">
  <div class="ons-article__image" aria-hidden="true">
    <a class="ons-article__image-link" href="#0" tabindex="-1">
      <img height="92" width="140" srcset="/img/small/placeholder-news.png 1x, /img/large/placeholder-news.png 2x" src="/img/small/placeholder-news.png" alt="Image placeholder" loading="lazy">
    </a>
  </div>
  <div class="ons-article__content">
    <h2 class="ons-article__heading">
      <a href="#0">The next steps towards the 2021 Census</a>
    </h2>
    <ul class="ons-u-fs-s ons-article__meta">
      <li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="2020-05-20">20 May 2020</time></li>
      <li class="ons-article__meta-item">
        <span class="ons-u-hidden">in </span>
        <a class="ons-article__meta-link" href="#0">Press releases</a>
      </li>
    </ul>
    <p class="ons-u-mb-no">The Office for National Statistics (ONS) has appointed a census engagement manager to support Tower Hamlets residents help rehearse the census this October.</p>
  </div>
</article>
{% from "components/articles/_macro.njk" import onsArticles %}
{{ onsArticles({
    "articles": [
        {
            "url": '#0',
            "title": 'A new approach to counting rooms and bedrooms',
            "date": {
                "short": '20 May 2020',
                "iso": '2020-05-20'
            },
            "category": {
                "title": 'Press releases',
                "url": '#0'
            },
            "excerpt": 'As part of preparations for the 2021 Census, Andy Teague explains how ONS will be estimating the number of rooms and bedrooms at an address.'
        },
        {
            "url": '#0',
            "title": 'The next steps towards the 2021 Census',
            "date": {
                "short": '20 May 2020',
                "iso": '2020-05-20'
            },
            "category": {
                "title": 'Press releases',
                "url": '#0'
            },
            "excerpt": 'The Office for National Statistics (ONS) has appointed a census engagement manager to support Tower Hamlets residents help rehearse the census this October.'
        }
    ]
}) }}
Name Type Required Description
title string true The title for the article
excerpt string true A short extract of text (for example, a short sentence to give some context of the article)
url string true The url for the link
featured boolean false Will render a featured version of the article if set to true
classes string false Custom classes to add to the article
image Image false An object containing path and filename attributes for the image
date Date true An object containing friendly date and system date formats
category Category true An object containing category name and url

Image

Name Type Required Description
smallSrc string true Path to the non-retina version of the image
largeSrc string true Path to the retina version of the image
alt string true Alt tag to explain the appearance and function of the image

Date

Name Type Required Description
short string true Short format of the date (for example, 20 May 2020)
iso string true ISO format of the date (for example, 2020-05-20)

Category

Name Type Required Description
title string true Category in which this article is associated (for example, Press releases)
url string false The url for the category
{% macro onsArticles(params) %}


    {% for article in (params.articles if params.articles is iterable else params.articles.items()) %}
    <article class="ons-article{% if article.featured %} ons-article--featured {% endif %}{{ ' ' + params.classes if params.classes else '' }}">


        {% if article.featured is defined and article.featured %}
        <div class="ons-container">
            <div class="ons-grid ons-u-pt-l ons-u-pb-l">
                <div class="ons-grid__col ons-col-5@m">
                {% endif %}

                    <div class="ons-article__image" aria-hidden="true">

                        <a class="ons-article__image-link" href="{{ article.url }}" tabindex="-1">

                            {% if article.featured is defined and article.featured %}

                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
                                    <img height="248" width="379" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
                                {% else %}
                                    <img height="248" width="379" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news-medium.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png" alt="Image placeholder" loading="lazy">
                                {% endif %}

                            {% else %}

                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
                                    <img height="92" width="140" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
                                {% else %}
                                    <img height="92" width="140" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png" alt="Image placeholder" loading="lazy">
                                {% endif %}

                            {% endif %}

                        </a>

                    </div>

                {% if article.featured is defined and article.featured %}
                </div>
                <div class="ons-grid__col ons-col-7@m">
                {% endif %}

                    <div class="ons-article__content">

                        <h2 class="ons-article__heading">
                            <a href="{{ article.url }}">{{ article.title }}</a>
                        </h2>

                        <ul class="ons-u-fs-s ons-article__meta">
                            {%- if article.date is defined and article.date %}<li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="{{ article.date.iso }}">{{ article.date.short }}</time></li>{% endif %}
                            {%- if article.category is defined and article.category %}
                                <li class="ons-article__meta-item">
                                    <span class="ons-u-hidden">in </span> 
                                    {%- if article.category.url is defined and article.category.url %}
                                        <a class="ons-article__meta-link" href="{{ article.category.url }}">{{ article.category.title }}</a>
                                    {% else %}
                                        {{ article.category.title }}
                                    {% endif %}
                                </li>
                            {% endif %}
                        </ul>

                        {% if article.excerpt is defined and article.excerpt %}
                        <p class="ons-u-mb-no">{{ article.excerpt | safe }}</p>
                        {% endif %}

                    </div>

                {% if article.featured is defined and article.featured %}
                </div>
            </div>
        </div>
        {% endif %}


    </article>
    {% endfor %}

{% endmacro %}
.ons-article {
  @include mq(s) {
    align-items: flex-start;
    display: flex;
  }

  & + & {
    border-top: 1px solid $color-grey-75;
    margin: 1.5rem 0 0;
    padding: 1.5em 0 0;
  }

  &__content {
    max-width: 660px; // Equivalent to 8 Columns;
  }

  &__image {
    flex-shrink: 0;
    margin-bottom: 1rem;
    max-width: 140px;

    @include mq(s) {
      display: flex;
      margin-bottom: 0;
      margin-right: 1.5rem;
    }
  }

  &__image-link {
    box-sizing: border-box;
    display: inline-block;
    outline-offset: 0;
    vertical-align: top;

    &:focus {
      box-shadow: 0 0 0 2px $color-black !important;
      outline: 4px solid $color-focus !important;
      outline-offset: 2px;
    }
  }

  &__meta {
    color: $color-grey-100;
    display: flex;
    margin-bottom: 1rem;
    padding-left: 0;

    &-item {
      display: block;
      margin: 0 1rem 0 0;
      padding-left: 0;
    }

    &-link {
      color: inherit;

      &:hover {
        color: $color-black;
        text-decoration: underline solid $color-black 2px;
      }
    }
  }

  // Featured
  &--featured {
    background-color: $color-grey-5;
    border-top: 0;
    padding-bottom: 0;
    padding-top: 0;

    .ons-article__image {
      margin-bottom: 1.5rem;
      margin-right: 0;
      max-width: 379px;

      @include mq(m) {
        margin-bottom: 0;
        margin-right: 1.5rem;
      }
    }

    .ons-article__image img {
      width: 100%;
    }
  }
}

How to use this component

We use two versions of the image, one for standard screens and the other for retina screens.

Image dimension for standard news articles:

  • standard screen is: 140px × 92px
  • retina screen is: 280px × 184px

Image dimensions for a featured news article:

  • standard screen is: 379px × 248px
  • retina screen is: 758px × 496px

We specify a folder path for both small and large images, which is defined in the macro as smallSrc and largeSrc.

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Articles’ component on GitHub