rivendellweb pattern library

Header 

<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(--oklch-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: 330 Bytes

Headers

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