England Football

News Container 

<div class="news-container common-template__news-container">

    <div style="border: 2px dashed grey; height: 100px;">
        <p>This content will be replaced when using the row container. This is for illustration purposes only</p>
    </div>
    <div style="border: 2px dashed grey; height: 100px;"></div>
    <div style="border: 2px dashed grey; height: 100px;"></div>
</div>

Row Container

Purpose

  • Creates space between components placed inside it.
  • Restricts the width of components placed inside it, to:
    • 100% width of screen, with padding either side
    • A Maximum of 952px if the screen size is larger.

Next steps

All the styles relating to .news-container have been extracted into a corresponding sass file, ideally we would split away from the need for common-template__ naming, but this isn’t currently supported. To do so, we can:

  1. Remove the related styles from static/src/library/pages/common-template/common-template.scss
  2. Remove the extra class name in our component
  3. Work with the BE team to update their instances.
  4. Include the associated sass file in the build by including it in app.scss
/* No context defined. */
  • Content: 
    .common-template__news-container, //TODO: We should look to phase this class out
.news-container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: $spacing-xxl;
  margin: 4rem auto;
  padding: 0 $spacing-m;

  .cta {
    margin-left: auto;
    margin-right: auto;
  }

  @media screen and (min-width: $mq-large) {
    max-width: 95.2rem;
    padding: 0;
  }
}
  • URL: /components/raw/news-container/news-container.scss
  • Filesystem Path: src/library/layouts/news-container/news-container.scss
  • Size: 370 Bytes 
<div class="news-container common-template__news-container">
  {{title}}
  {{#> @partial-block}}
  <div style="border: 2px dashed grey; height: 100px;">
    <p>This content will be replaced when using the row container. This is for illustration purposes only</p>
  </div>
  <div style="border: 2px dashed grey; height: 100px;"></div>
  <div style="border: 2px dashed grey; height: 100px;"></div>
  {{/ @partial-block}}
</div>