Verndale UI Components

C-FMT-12: Page Intro Row 

<section class="page-intro" aria-labelledby="pageIntroHeading">
    <h2 class="page-intro__heading" id="pageIntroHeading">Heading</h2>
    <div class="page-intro__lead-in rtf">
        <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    </div>
</section>
 
<section class="page-intro" aria-labelledby="pageIntroHeading">
  <h2 class="page-intro__heading" id="pageIntroHeading">{{heading}}</h2>
  <div class="page-intro__lead-in rtf">{{{leadIn}}}</div>
</section>
 
{
  "heading": "Heading",
  "leadIn": "<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>"
}
  • Content: 
    @import
"../theme",
"variables";

.page-intro {
  margin-bottom: map-get($module-spacing, "mobile");
  margin-top: map-get($module-spacing, "mobile");

  @include mq(desktop) {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: map-get($module-spacing, "desktop");
    margin-top: map-get($module-spacing, "desktop");
  }
}

.page-intro__heading {
  color: $page-intro-headline-color;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 10px;

  @include mq(desktop) {
    flex-shrink: 0;
    font-size: 48px;
    line-height: 1.13;
    width: calc(50% - 12px);
  }
}

.page-intro__lead-in {
  font-size: 18px;
  line-height: 1.78;

  @include mq(desktop) {
    flex-shrink: 0;
    width: calc(50% - 12px);
  }
}
  • URL: /components/raw/c-fmt-12-page-intro-row/_styles.scss
  • Filesystem Path: src/components/C-FMT-12-page-intro-row/_styles.scss
  • Size: 786 Bytes
  • Handle: @c-fmt-12-page-intro-row
  • Preview:
  • Filesystem Path: src/components/C-FMT-12-page-intro-row/C-FMT-12-page-intro-row.hbs

Page Intro

Headline and lead in text. Headline appears to the left on desktop and above the lead in on mobile and tablet.

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/page-intro/styles";

Copy and paste to your project any of the markup in the button variations - you can find the markup in the HTML tab.

Styling

The component will already have a default style/theme set, so it will work out of the box. The button 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

$page-intro-headline-color;

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

$page-intro-headline-color: #808080;

@import "../../node_modules/@verndale/front-end-components/lib/page-intro/styles";