England Football

Article Author: Author Avatar 

<div class="article-author ">
    <img src=/assets/example-content/author-avatar.png alt="Avatar" />
    <div class="article-author__inner">
        <h4>William Dalton</h4>
        <p>10 min read - 10 Mar 2020</p>
    </div>
</div>

No notes defined.

{
  "fullDate": "10 Mar 2020",
  "fullName": "William Dalton",
  "duration": "10 min",
  "default_image": false,
  "modifier": "",
  "image": "/assets/example-content/author-avatar.png"
}
  • Content: 
    .article-author {
  display: flex;
  align-items: center;

  img {
    height: 3.2rem;
    width: 3.2rem;
    border-radius: 50%;
    display: block;
    margin-right: 0.8rem;
  }

  &__inner {
    display: flex;
    flex-direction: column;

    h4 {
      font-family: $text-font-ef;
      font-size: 1.6rem;
      font-style: normal;
      font-weight: 700;
      line-height: 2.4rem;
      letter-spacing: 0;
      text-align: left;
      color: $blue;
    }

    p {
      font-family: $text-font-ef;
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 400;
      line-height: 2rem;
      letter-spacing: 0.02em;
      text-align: left;
      color: $color-interface-light;
      margin-top: -0.4rem;
    }
  }
  &--crest {
    &::before {
      content: '';
      display: block;
      width: 3.2rem;
      height: 3.2rem;
      background-position: center center;
      background-image: url('./assets/images/author-crest.svg');
      border-radius: 50%;
      margin-right: 0.8rem;
    }
  }
}
  • URL: /components/raw/article-author/article-author.scss
  • Filesystem Path: src/library/components/article-author/article-author.scss
  • Size: 1 KB 
<div class="article-author {{#if modifier}}article-author--{{modifier}}{{/if}}">
  {{#unless default_image}}
    <img src={{image}} alt="Avatar"/>
  {{/unless}}
  <div class="article-author__inner">
    <h4>{{fullName}}</h4>
    <p>{{duration}} read - {{fullDate}}</p>
  </div>
</div>