Jump To:

  1. Demos
    1. Standard Pull Quote
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Layout for a pull quote, relies on badge component for image

Demos

Standard Pull Quote

A centered pull quote with an optional author image, name, and title.

The best way to predict the future is to create it. Design systems provide the foundation for that creation.

Jane Doe
Jane Doe Principal Design Architect
HTML 
<figure class="pull-quote">
  <blockquote class="pull-quote__body type-large-x">
    <p>The best way to predict the future is to create it. Design systems provide the foundation for that creation.</p>
  </blockquote>
  <figcaption class="pull-quote__author">
    <div class="pull-quote__author-image">
      <div class="badge badge--small">
        <div class="badge__inner">
          <img src="https://picsum.photos/id/64/100/100" alt="Jane Doe">
        </div>
      </div>
    </div>
    <strong class="pull-quote__author-name">Jane Doe</strong>
    <span class="pull-quote__author-title">Principal Design Architect</span>
  </figcaption>
</figure>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "body-line-height" : true,
  "image-margin-bottom" : 1rem,
  "image-margin-top" : 2.5rem,
  "name-margin-bottom" : 1rem,
  "padding-y" : 2em,
  "title-font-style" : italic,

  "quote-mark-character" : "\201c",
  "quote-mark-color" : null,
  "quote-mark-font-family" : "Georgia",
  "quote-mark-font-size" : 3.75em,
  "quote-mark-enabled" : true,
  "quote-mark-line-height" : 0.35,
);
File Information
  • File: _pull-quote.scss
  • Group: pull-quote
  • Type: variable
  • Lines (comments): 22-35
  • Lines (code): 37-51

Map Properties

Name Type Default
body-line-height Number true
image-margin-bottom Dimension 1rem
image-margin-top Dimension 2.5rem
name-margin-bottom Dimension 1rem
padding-y Dimension 2em
title-font-style CssValue italic
quote-mark-character String "\201c"
quote-mark-color Color null
quote-mark-font-family String "Georgia"
quote-mark-font-size Dimension 3.75em
quote-mark-enabled Boolean true
quote-mark-line-height Number 0.35

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _pull-quote.scss
  • Group: pull-quote
  • Type: mixin
  • Lines (comments): 53-56
  • Lines (code): 58-60

Examples

@include ulu.component-pull-quote-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _pull-quote.scss
  • Group: pull-quote
  • Type: mixin
  • Lines (comments): 72-74
  • Lines (code): 76-111

Examples

@include ulu.component-pull-quote-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _pull-quote.scss
  • Group: pull-quote
  • Type: function
  • Lines (comments): 62-65
  • Lines (code): 67-70

Examples

@include ulu.component-pull-quote-get("property");

Parameters

Name Type Description
$name Map Name of property

Require