PSI Software SE Design Library

Quote Inset

No notes defined.

<!-- Default -->
<figure class="quoteInset">

    <blockquote class="quoteInset-quote">
        <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

    </blockquote>

    <figcaption class="quoteInset-caption">

        <span class="quoteInset-author">
            <span class="quoteInset-author-name">Leora Gulgowski</span>
            <span class="quoteInset-author-title">Direct Tactics Specialist</span>
        </span>

        <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

    </figcaption>

</figure>


<!-- With Backdrop -->
<figure class="quoteInset has-backdrop" data-theme="backdrop">

    <blockquote class="quoteInset-quote">
        <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

    </blockquote>

    <figcaption class="quoteInset-caption">

        <span class="quoteInset-author">
            <span class="quoteInset-author-name">Leora Gulgowski</span>
            <span class="quoteInset-author-title">Direct Tactics Specialist</span>
        </span>

        <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

    </figcaption>

</figure>


<!-- Accent -->
<figure class="quoteInset has-backdrop" data-theme="accent">

    <blockquote class="quoteInset-quote">
        <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

    </blockquote>

    <figcaption class="quoteInset-caption">

        <span class="quoteInset-author">
            <span class="quoteInset-author-name">Leora Gulgowski</span>
            <span class="quoteInset-author-title">Direct Tactics Specialist</span>
        </span>

        <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

    </figcaption>

</figure>


<!-- With Avatar -->
<figure class="quoteInset has-avatar">

    <blockquote class="quoteInset-quote">
        <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

    </blockquote>

    <figcaption class="quoteInset-caption">

        <span class="quoteInset-avatar">
            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

        </span>
        <span class="quoteInset-author">
            <span class="quoteInset-author-name">Leora Gulgowski</span>
            <span class="quoteInset-author-title">Direct Tactics Specialist</span>
        </span>

        <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

    </figcaption>

</figure>


<!-- With Avatar and Backdrop -->
<figure class="quoteInset has-backdrop has-avatar" data-theme="backdrop">

    <blockquote class="quoteInset-quote">
        <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

    </blockquote>

    <figcaption class="quoteInset-caption">

        <span class="quoteInset-avatar">
            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

        </span>
        <span class="quoteInset-author">
            <span class="quoteInset-author-name">Leora Gulgowski</span>
            <span class="quoteInset-author-title">Direct Tactics Specialist</span>
        </span>

        <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

    </figcaption>

</figure>


<!-- With Avatar Accent -->
<figure class="quoteInset has-backdrop has-avatar" data-theme="accent">

    <blockquote class="quoteInset-quote">
        <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

    </blockquote>

    <figcaption class="quoteInset-caption">

        <span class="quoteInset-avatar">
            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

        </span>
        <span class="quoteInset-author">
            <span class="quoteInset-author-name">Leora Gulgowski</span>
            <span class="quoteInset-author-title">Direct Tactics Specialist</span>
        </span>

        <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

    </figcaption>

</figure>


<!-- Glass -->
<figure class="quoteInset has-backdrop" data-theme="glass">

    <blockquote class="quoteInset-quote">
        <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

    </blockquote>

    <figcaption class="quoteInset-caption">

        <span class="quoteInset-author">
            <span class="quoteInset-author-name">Leora Gulgowski</span>
            <span class="quoteInset-author-title">Direct Tactics Specialist</span>
        </span>

        <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

    </figcaption>

</figure>


<!-- Demo for With Backdrop with Glass Theme (Deprecated) -->
<section class="doc-section" style="margin-top: var(--sp-section);">

    <header class="doc-header">

        <h2 class="doc-header-title">Demo für Glass Theme</h2>

        <div class="doc-header-configuration">
            <ul data-label="Theme">
                <li>glass</li>
            </ul>
        </div>

    </header>

    <div class="doc-variant" style="padding: var(--bp-large); padding-top: 1px; background: linear-gradient(to right, var(--page-color) 50%, transparent 50%), url(../../images/placeholder/dummy-image.jpg); background-size: cover;">
        <figure class="quoteInset has-backdrop" data-theme="glass">

            <blockquote class="quoteInset-quote">
                <p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>

            </blockquote>

            <figcaption class="quoteInset-caption">

                <span class="quoteInset-author">
                    <span class="quoteInset-author-name">Leora Gulgowski</span>
                    <span class="quoteInset-author-title">Direct Tactics Specialist</span>
                </span>

                <span class="quoteInset-cite"><a href="./" target="_blank">Titel der Publikation</a></span>

            </figcaption>

        </figure>

    </div>

</section>


<!-- Default -->
<figure class="quoteInset{{#if theme}} has-backdrop{{/if}}{{#if author.avatar}} has-avatar{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    <blockquote class="quoteInset-quote">
        {{{content}}}
    </blockquote>

    <figcaption class="quoteInset-caption">

        {{#author}}
            {{#avatar}}
        <span class="quoteInset-avatar">
            {{render '@avatar' (contextData '@quoteinset' this) merge=true}}
        </span>
            {{/avatar}}
        <span class="quoteInset-author">
            {{#name}}<span class="quoteInset-author-name">{{{.}}}</span>{{/name}}
            {{#title}}<span class="quoteInset-author-title">{{{.}}}</span>{{/title}}
        </span>
        {{/author}}

        {{#cite}}
        <span class="quoteInset-cite">{{#url}}<a href="{{{.}}}"{{#../target}} target="{{{.}}}"{{/../target}}>{{/url}}{{{label}}}{{#url}}</a>{{/url}}</span>
        {{/cite}}

    </figcaption>

</figure>

<!-- With Backdrop -->
<figure class="quoteInset{{#if theme}} has-backdrop{{/if}}{{#if author.avatar}} has-avatar{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    <blockquote class="quoteInset-quote">
        {{{content}}}
    </blockquote>

    <figcaption class="quoteInset-caption">

        {{#author}}
            {{#avatar}}
        <span class="quoteInset-avatar">
            {{render '@avatar' (contextData '@quoteinset' this) merge=true}}
        </span>
            {{/avatar}}
        <span class="quoteInset-author">
            {{#name}}<span class="quoteInset-author-name">{{{.}}}</span>{{/name}}
            {{#title}}<span class="quoteInset-author-title">{{{.}}}</span>{{/title}}
        </span>
        {{/author}}

        {{#cite}}
        <span class="quoteInset-cite">{{#url}}<a href="{{{.}}}"{{#../target}} target="{{{.}}}"{{/../target}}>{{/url}}{{{label}}}{{#url}}</a>{{/url}}</span>
        {{/cite}}

    </figcaption>

</figure>

<!-- Accent -->
<figure class="quoteInset{{#if theme}} has-backdrop{{/if}}{{#if author.avatar}} has-avatar{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    <blockquote class="quoteInset-quote">
        {{{content}}}
    </blockquote>

    <figcaption class="quoteInset-caption">

        {{#author}}
            {{#avatar}}
        <span class="quoteInset-avatar">
            {{render '@avatar' (contextData '@quoteinset' this) merge=true}}
        </span>
            {{/avatar}}
        <span class="quoteInset-author">
            {{#name}}<span class="quoteInset-author-name">{{{.}}}</span>{{/name}}
            {{#title}}<span class="quoteInset-author-title">{{{.}}}</span>{{/title}}
        </span>
        {{/author}}

        {{#cite}}
        <span class="quoteInset-cite">{{#url}}<a href="{{{.}}}"{{#../target}} target="{{{.}}}"{{/../target}}>{{/url}}{{{label}}}{{#url}}</a>{{/url}}</span>
        {{/cite}}

    </figcaption>

</figure>

<!-- With Avatar -->
<figure class="quoteInset{{#if theme}} has-backdrop{{/if}}{{#if author.avatar}} has-avatar{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    <blockquote class="quoteInset-quote">
        {{{content}}}
    </blockquote>

    <figcaption class="quoteInset-caption">

        {{#author}}
            {{#avatar}}
        <span class="quoteInset-avatar">
            {{render '@avatar' (contextData '@quoteinset' this) merge=true}}
        </span>
            {{/avatar}}
        <span class="quoteInset-author">
            {{#name}}<span class="quoteInset-author-name">{{{.}}}</span>{{/name}}
            {{#title}}<span class="quoteInset-author-title">{{{.}}}</span>{{/title}}
        </span>
        {{/author}}

        {{#cite}}
        <span class="quoteInset-cite">{{#url}}<a href="{{{.}}}"{{#../target}} target="{{{.}}}"{{/../target}}>{{/url}}{{{label}}}{{#url}}</a>{{/url}}</span>
        {{/cite}}

    </figcaption>

</figure>

<!-- With Avatar and Backdrop -->
<figure class="quoteInset{{#if theme}} has-backdrop{{/if}}{{#if author.avatar}} has-avatar{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    <blockquote class="quoteInset-quote">
        {{{content}}}
    </blockquote>

    <figcaption class="quoteInset-caption">

        {{#author}}
            {{#avatar}}
        <span class="quoteInset-avatar">
            {{render '@avatar' (contextData '@quoteinset' this) merge=true}}
        </span>
            {{/avatar}}
        <span class="quoteInset-author">
            {{#name}}<span class="quoteInset-author-name">{{{.}}}</span>{{/name}}
            {{#title}}<span class="quoteInset-author-title">{{{.}}}</span>{{/title}}
        </span>
        {{/author}}

        {{#cite}}
        <span class="quoteInset-cite">{{#url}}<a href="{{{.}}}"{{#../target}} target="{{{.}}}"{{/../target}}>{{/url}}{{{label}}}{{#url}}</a>{{/url}}</span>
        {{/cite}}

    </figcaption>

</figure>

<!-- With Avatar Accent -->
<figure class="quoteInset{{#if theme}} has-backdrop{{/if}}{{#if author.avatar}} has-avatar{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    <blockquote class="quoteInset-quote">
        {{{content}}}
    </blockquote>

    <figcaption class="quoteInset-caption">

        {{#author}}
            {{#avatar}}
        <span class="quoteInset-avatar">
            {{render '@avatar' (contextData '@quoteinset' this) merge=true}}
        </span>
            {{/avatar}}
        <span class="quoteInset-author">
            {{#name}}<span class="quoteInset-author-name">{{{.}}}</span>{{/name}}
            {{#title}}<span class="quoteInset-author-title">{{{.}}}</span>{{/title}}
        </span>
        {{/author}}

        {{#cite}}
        <span class="quoteInset-cite">{{#url}}<a href="{{{.}}}"{{#../target}} target="{{{.}}}"{{/../target}}>{{/url}}{{{label}}}{{#url}}</a>{{/url}}</span>
        {{/cite}}

    </figcaption>

</figure>

<!-- Glass -->
<figure class="quoteInset{{#if theme}} has-backdrop{{/if}}{{#if author.avatar}} has-avatar{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

    <blockquote class="quoteInset-quote">
        {{{content}}}
    </blockquote>

    <figcaption class="quoteInset-caption">

        {{#author}}
            {{#avatar}}
        <span class="quoteInset-avatar">
            {{render '@avatar' (contextData '@quoteinset' this) merge=true}}
        </span>
            {{/avatar}}
        <span class="quoteInset-author">
            {{#name}}<span class="quoteInset-author-name">{{{.}}}</span>{{/name}}
            {{#title}}<span class="quoteInset-author-title">{{{.}}}</span>{{/title}}
        </span>
        {{/author}}

        {{#cite}}
        <span class="quoteInset-cite">{{#url}}<a href="{{{.}}}"{{#../target}} target="{{{.}}}"{{/../target}}>{{/url}}{{{label}}}{{#url}}</a>{{/url}}</span>
        {{/cite}}

    </figcaption>

</figure>

<!-- Demo for With Backdrop with Glass Theme (Deprecated) -->
<section class="doc-section" style="margin-top: var(--sp-section);">

    <header class="doc-header">

        <h2 class="doc-header-title">Demo für Glass Theme</h2>

        <div class="doc-header-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
                {{#if themes}}
            <ul data-label="Theme">
                    {{#themes}}
                <li>{{{.}}}</li>
                    {{/themes}}
            </ul>
                {{/if}}
        </div>

    </header>

    {{#variant}}
        <div class="doc-variant" style="padding: var(--bp-large); padding-top: 1px; background: linear-gradient(to right, var(--page-color) 50%, transparent 50%), url({{path "/images/placeholder/dummy-image.jpg"}}); background-size: cover;">
            {{render '@quoteinset' (contextData '@quoteinset' this) merge=true}}
        </div>
    {{/variant}}

</section>
 
/* Default */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist"
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  }
}


/* With Backdrop */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist"
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  },
  "theme": "backdrop"
}


/* Accent */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist"
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  },
  "theme": "accent"
}


/* With Avatar */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist",
    "avatar": {
      "initials": "BM",
      "image": {
        "src": "https://i.pravatar.cc/640"
      }
    }
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  }
}


/* With Avatar and Backdrop */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist",
    "avatar": {
      "initials": "BM",
      "image": {
        "src": "https://i.pravatar.cc/640"
      }
    }
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  },
  "theme": "backdrop"
}


/* With Avatar Accent */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist",
    "avatar": {
      "initials": "BM",
      "image": {
        "src": "https://i.pravatar.cc/640"
      }
    }
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  },
  "theme": "accent"
}


/* Glass */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist"
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  },
  "theme": "glass"
}


/* Demo for With Backdrop with Glass Theme (Deprecated) */
{
  "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
  "author": {
    "name": "Leora Gulgowski",
    "title": "Direct Tactics Specialist"
  },
  "cite": {
    "label": "Titel der Publikation",
    "url": "./",
    "target": "_blank"
  },
  "themes": "glass",
  "variant": {
    "content": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
    "author": {
      "name": "Leora Gulgowski",
      "title": "Direct Tactics Specialist"
    },
    "cite": {
      "label": "Titel der Publikation",
      "url": "./",
      "target": "_blank"
    },
    "theme": "glass"
  }
}
  • Content: 
    $quoteInset_indent: 0 !default;

$quoteInset_quote_styles: (
    text-size: 2x-large,
    font-family: $_font-family--secondary,
    font-style: italic,
) !default;

$quoteInset_author-name_styles: (
    display: block,
    text-size: small,
    font-weight: $_font-weight--bold,
    color: $_minor-color,
) !default;

$quoteInset_author-title_styles: (
    display: block,
    text-size: small,
    color: $_minor-color,
) !default;

$quoteInset_cite_styles: (
    display: block,
    text-size: small,
) !default;

$quoteInset_marker_icon: '<svg width="112" height="80" viewBox="0 0 112 80" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><path d="M58.7282 80L59.8769 67.7362C79.8838 63.363 89.8872 55.1872 89.8872 43.2086C89.8872 39.7861 86.6803 36.0784 80.2667 32.0856C73.9487 28.0927 70.7897 23.1491 70.7897 17.2549C70.7897 12.0261 72.465 7.84314 75.8154 4.70589C79.1658 1.56863 83.5692 4.62515e-06 89.0256 5.09888e-06C95.4393 5.65573e-06 100.896 2.18658 105.395 6.55972C109.798 11.0279 112 16.8271 112 23.9572C112 38.0273 107.453 50.0059 98.359 59.8931C89.265 69.7802 76.0547 76.4825 58.7282 80ZM0 80L1.14872 67.7362C21.1556 63.268 31.159 55.0921 31.159 43.2086C31.159 39.7861 27.9521 36.0784 21.5385 32.0856C15.2205 28.0927 12.0615 23.1491 12.0615 17.2549C12.0615 12.0261 13.7368 7.84314 17.0872 4.70588C20.3419 1.56863 24.7453 -4.82046e-07 30.2974 0C36.8068 5.65157e-07 42.2633 2.18657 46.6667 6.55972C50.9744 11.0279 53.1282 16.8271 53.1282 23.9572C53.1282 38.2175 48.5812 50.2436 39.4872 60.0357C30.3932 69.9228 17.2308 76.5775 0 80Z"/></svg>' !default;

$quoteInset_marker_width: 112px !default;
$quoteInset_marker_height: 80px !default;
$quoteInset_marker_width--mobile: (.67 * $quoteInset_marker_width) !default;
$quoteInset_marker_height--mobile: (.67 * $quoteInset_marker_height) !default;

@import "_quoteInset.settings";
@import "_quoteInset.styles";

%quoteInset {
    position: relative;

    &-quote {
        @include stack-spacing(0);

        &::before {
            content: "";

            @include stack-spacing(default, margin-bottom);

            display: block;
            width: $quoteInset_marker_width;
            height: $quoteInset_marker_height;

            background: svg-url($quoteInset_marker_icon, $_accent-color);
            background-size: contain;
        }

    }

    &-avatar {
        position: absolute;
        transform: translateX(calc(-100% - var(--gg)));
    }

    .avatar {
        @extend %avatar--large;
        @include stack-spacing(0);
    }

    &-cite {

        a:not(:hover):not(:focus):not(:focus-visible):not(:active) {
            color: $_minor-color;
            text-decoration-color: $_minor-color;
        }

    }

    @include only-on-desktop(){

        &-quote,
        &-caption {
            width: get-columns-width(8);
            margin-left: get-columns-indent(2);
        }

        &.has-avatar &-quote,
        &.has-avatar &-caption {
            width: get-columns-width(7);
            margin-left: get-columns-indent(3);
        }

        &-avatar {
            top: $quoteInset_marker_height;
        }

    }

    @include not-on-desktop(){

        &-quote {

            &::before {
                width: $quoteInset_marker_width--mobile;
                height: $quoteInset_marker_height--mobile;
            }

        }

        &-caption {
            min-height: $avatar_size--large--mobile;

            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        &.has-avatar &-caption {
            padding-left: calc(#{$avatar_size--large--mobile} + var(--gg));
        }

    }

}

.quoteInset {

    &-avatar {
        @extend %quoteInset-avatar;
    }

}

%quoteInset--with-backdrop {
    @include full-width-backdrop($set-padding: true);

    @include only-on-desktop(){

        %quoteInset-quote {

            &::before {
                margin-top: (-.33 * $quoteInset_marker_height);
            }

        }

        %quoteInset-avatar {
           @include stack-spacing(component);
        }

    }

    &:not([data-theme]) {
        background-color: $_backdrop-color;
    }

    &[data-theme="accent"] {

        %quoteInset-quote::before {
            background-image: svg-url($quoteInset_marker_icon, $_page-color);
        }

    }

    &[data-theme="glass"] {
        background-color: $_glass_background-color;
        backdrop-filter: $_glass_backdrop-filter;

        &::before {
            display: none;
        }

    }

}

.quoteInset.has-backdrop {
    @extend %quoteInset--with-backdrop;
}

.quoteInset.is-boxed { // Legacy support
    @extend %quoteInset--with-backdrop;
}
  • URL: /components/raw/quoteinset/_quoteInset.scss
  • Filesystem Path: components/04-modules/quoteInset/_quoteInset.scss
  • Size: 4.7 KB
  • Content: 
    $quoteInset_indent: 3rem !default;

$quoteInset_quote_styles: (
    text-size: large,
    font-weight: $_font-weight--bold,
) !default;

$quoteInset_author-name_styles: (
    text-size: small
) !default;

$quoteInset_author-title_styles: (
    text-size: small
) !default;

$quoteInset_cite_styles: (
    text-size: small
) !default;
  • URL: /components/raw/quoteinset/_quoteInset.settings.scss
  • Filesystem Path: components/04-modules/quoteInset/_quoteInset.settings.scss
  • Size: 334 Bytes
  • Content: 
     %quoteInset {
    @include stack-spacing(section);

    margin-left: $quoteInset_indent;
    margin-right: $quoteInset_indent;

    &-quote {
        @extend %richtextBlock;

        margin-left: 0;
        margin-right: 0;

        @include styles($quoteInset_quote_styles);

        > *:first-child {
            margin-top: 0;
        }

    }

    &-caption {
        @include stack-spacing();
    }

    &-author {

        &-name {
            @include styles($quoteInset_author-name_styles);
        }

        &-title {
            @include styles($quoteInset_author-title_styles);
        }

    }

    &-cite {
        @include styles($quoteInset_cite_styles);

        a {
            @extend %link;
        }

    }

}

.quoteInset {
    @extend %quoteInset;

    &-quote {
        @extend %quoteInset-quote;
    }

    &-caption {
        @extend %quoteInset-caption;
    }

    &-author {
        @extend %quoteInset-author;

        &-name {
            @extend %quoteInset-author-name;
        }

        &-title {
            @extend %quoteInset-author-title;
        }

    }

    &-cite {
        @extend %quoteInset-cite;
    }

}
  • URL: /components/raw/quoteinset/_quoteInset.styles.scss
  • Filesystem Path: components/04-modules/quoteInset/_quoteInset.styles.scss
  • Size: 1.2 KB