England Football

Tray 

<div class="tray common-template__tray">
    <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>

Tray

Purpose

  • Adds a wrapper with a white background and rounded corners.
  • Has top and bottom padding within the tray
  • Restricts the width of components placed inside it to a Maximum of 1284px
  • Does not space components out within (but can be combined with a row-container)
  • Includes styles for direct h1 children**

Next steps

All the styles relating to .tray 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

** We should review whether this is needed.

/* No context defined. */
  • Content: 
    .common-template__tray, // TODO: We should look to phase this class out.
.tray {
  background-color: $white;
  margin: 0 auto;
  border-radius: 1.8rem;
  position: relative;
  overflow: hidden;
  max-width: 136.4rem;
  padding-top: 4.2rem;
  padding-bottom: 4.2rem;
  width: 100%;

  //TODO: Update with themeing
  > h1 {
    font: italic bold 5.8rem/4.2rem $text-font2;
    color: $red;
    margin-bottom: 5.2rem;
    text-align: center;
  }

  @media screen and (min-width: $mq-medium) {
    padding-top: 7.3rem;
    padding-bottom: 7.3rem;
  }

  @media screen and (min-width: 1284px) {
    min-width: 1284px;
    width: 90%;
  }
}
  • URL: /components/raw/tray/tray.scss
  • Filesystem Path: src/library/layouts/tray/tray.scss
  • Size: 635 Bytes 
<div class="tray common-template__tray" {{{attrs}}}>
  {{#> @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>