<div class="header">
    <h1>This is the article title</h1>
    <h2>the subtitle, if any</h2>

    <h3 class="authors">
        <span class="author">Neil Doe</span>
    </h3>
    <hr>
    <p class="article-summary recursive-mono-linear">This is the summary of the article if that&#x27;s what we&#x27;re putting it under, we may want to remove it for non-article headers</p>
    <hr>
</div>
<div class="header">
  <h1>{{header-name}}</h1>
  <h2>{{header-subtitle}}</h2>

  <h3 class="authors">
    {{#each authors}}
      <span class="author">{{name}}</span>
    {{/each}}
  </h3>
  <hr>
  <p class="article-summary recursive-mono-linear">{{ header-summary }}</p>
  <hr>
</div>
{
  "header-name": "This is the article title",
  "header-subtitle": "the subtitle, if any",
  "header-summary": "This is the summary of the article if that's what we're putting it under, we may want to remove it for non-article headers",
  "authors": [
    {
      "name": "Neil Doe"
    }
  ]
}
  • Content:
    .header {
      & h1 {
        text-align: center;
      }
      
      & h2 {
        text-align: center;
      }
    
      & h3 {
        text-align: center;
    
      }
    
      & hr {
        border: 1px solid var(--color-charcoal);
        margin-top: 2rem;
        margin-bottom: 2rem;
      }
    
      & p.article-summary {
        width: 60%;
        margin: 0 auto;
        text-align: justify;
      }
    }
    
  • URL: /components/raw/header/header.css
  • Filesystem Path: src/components/02-molecules/03-header/header.css
  • Size: 324 Bytes

Headers

The idea is to play with header layout ahead of working on article layouts.