v0.40

Markup

<div class="top-page-tags">
  <a class="tag-item tag-item--main page-type" href="#">Press Release</a>
  <div class="tag-wrap tags">
    <a class="tag-item" href="#">#Climate</a>
    <a class="tag-item" href="#">#Oceans</a>
    <a class="tag-item" href="#">#Oil</a>
  </div>
</div>

Example

Markup

<label class="custom-control custom-checkbox">
  <input type="checkbox" name="checkbox_name" />
  <span class="custom-control-description">Check me</span>
</label>
<label class="custom-control custom-radio">
  <input type="radio" name="radio_name" value="1" />
  <span class="custom-control-description">Select me</span>
</label>
<label class="custom-control custom-checkbox">
  <input type="radio" name="radio_name" value="2" />
  <span class="custom-control-description">Or me</span>
</label>

Source: layout/_navbar.scss, line 1

2.5 Navbar

Adds a navigation bar to the top of the site.

Example

Markup

<nav id="header" class="top-navigation navbar">
<a class="site-logo" href="#">
  <img src="https://www.greenpeace.org/international/wp-content/themes/planet4-master-theme/images/gp-logo.svg" alt="Greenpeace">
</a>
<button
    class="btn btn-navbar-toggle navbar-dropdown-toggle"
    data-toggle="open"
    data-target="#navbar-dropdown"
    aria-expanded="false"
    aria-label=""
>
  <span>Menu</span>
</button>
<ul id="navbar-dropdown" class="navbar-dropdown list-unstyled">
  <li class="nav-item" id="country-select">
    <button class="close-navbar-dropdown">
      <span class="screen-reader-text">Close Menu</span>
    </button>
    <button
        class="country-dropdown-toggle"
        data-toggle="open"
        data-target="#country-list"
        aria-expanded="false"
        aria-label="#"
    >
      <span class="screen-reader-text">...:</span> Navbar title
      <span class="screen-reader-text">...</span>
    </button>
  </li>
  <li class="nav-item wpml-ls-item">
    <a class="nav-link" href="#">EN</a>
    <a class="nav-link" href="#">NL</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">ABOUT US</a>
  </li>
  <li class="nav-item">
    <a class="btn btn-donate" href="#">DONATE</a>
  </li>
</ul>
<button
    class="navbar-search-toggle"
    data-toggle="open"
    data-target="#search_form"
    aria-expanded="false"
    aria-label=""
>
  <span class="screen-reader-text">Toggle search form</span>
</button>
<form id="search_form" action="#" class="form nav-item nav-search-wrap">
  <input id="search_input" type="search" class="form-control" placeholder="Search"
       value="" name="s" aria-label="Search">
  <input id="orderby" type="hidden" name="orderby" value=""/>
  <button class="top-nav-search-btn" type="submit">
    <svg viewBox="0 0 32 32" class="icon"><use xlink:href="images/symbol/svg/sprite.symbol.svg#search"></use></svg>
    <span class="screen-reader-text">Search</span>
  </button>
</form>
</nav>

Source: layout/_page-header.scss, line 1

2.6 Page Header

Creates a page header with tags, post title, authorship data and comments.

Markup

<header class="page-header">
  <div class="page-header-background">
  </div>
  <div class="container">
    <div class="top-page-tags">
      <a class="tag-item tag-item--main page-type" href="#">A page tag</a>
      <div class="tag-wrap issues">
        <a class="tag-item tag-item--main" href="#">Some issue</a>
      </div>
      <div class="tag-wrap tags">
        <a class="tag-item tag" href="#">#tag</a>
      </div>
    </div>
    <h1 class="page-header-title">The post title</h1>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="single-post-meta">
        <address class="single-post-author">
          by <a href="#">Jane Doe</a>
        </address>
        <time class="single-post-time" pubdate>June 6th, 2019</time>
          <span class="separator">|</span>
          <span id="comments-link" class="comment-link">
            <img src="/images/icons/speech_bubble.svg">
            <a class="quantity"> 11 <span class="display-text">Comments</span> </a>
          </span>
      </div>
    </div>
    <div class="col-md-6">
      (share buttons)
    </div>
  </div>
</header>

Source: layout/_page-section.scss, line 1

2.7 Page Section

Describes title and description of each block.

Example

Block Title

Description Text

Markup

<header>
  <h2 class="page-section-header">Block Title</h2>
</header>
<div class="page-section-description">Description Text</div>

Source: base/_variables.scss, line 29

2.8 Spacing

Variables that define certain margin values to be used mostly for vertical spacing between and inside blocks.

Example

this is a block with margin-top: $space-md and margin-bottom: $space-xl on large screens.

Markup

<div class="block">
  this is a block with <code>margin-top: $space-md</code>
  and <code>margin-bottom: $space-xl</code> on large screens.
</div>