Verndale UI Components

C-BNR-13: Simple Masthead 

<div class="masthead  masthead--simple">
    <div class="masthead__inner container  ">
        <div class="masthead__content">
            <h1 class="masthead__heading">Masthead With No Image</h1>
            <h2 class="masthead__subheading">Optional subheading</h2>
            <div class="masthead__copy rtf">
                <p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Masterhead With No Image rutrum faucibus dolor auctor.</p>
            </div>
            <div class="masthead__actions">
                <a href="#" class="btn btn--primary">
                    Primary Call-to-Action
                </a>

                <a href="#" class="link link--primary">
                    Large Text Link
                </a>

            </div>
        </div>
    </div>
</div>
 
{{>@masthead}}
 
{
  "heading": "Masthead With No Image",
  "subheading": "Optional subheading",
  "ctaLabel": "Primary Call-to-Action",
  "linkLabel": "Large Text Link",
  "copy": "<p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Masterhead With No Image rutrum faucibus dolor auctor.</p>"
}

Link List

Allow content authors to display a simple masthead at the top of a page

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import '../../node_modules/@verndale/front-end-components/lib/simple-msterhead/styles';

Styling

The component will already have a default style/theme set, so it will work out of the box. The link list has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.

Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss

$masthead-copy-font-family,
$masthead-heading-font-family,
$masthead-subheading-font-family,
$masthead-copy-color,
$masthead-heading-color,
$masthead-subheading-color

You always need to set your overrides before the import of you component - for example:

$masthead-subheading-color: #06847b;

@import '../../node_modules/@verndale/front-end-components/lib/masthead/styles';