PSI Software SE Design Library

Copy

No notes defined.

<!-- Default -->
<p class="copy ">
    Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>


<!-- Standfirst -->
<p class="copy is-standfirst">
    Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>


<!-- Strong -->
<p class="copy is-strong">
    Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>


<!-- Small -->
<p class="copy is-small">
    Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>


<!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Standfirst</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-standfirst</li>
            </ul>
        </div>

    </header>

    <div>
        <p class="copy is-standfirst">
            Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
        </p>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Strong</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-strong</li>
            </ul>
        </div>

    </header>

    <div>
        <p class="copy is-strong">
            Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
        </p>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div>
        <p class="copy ">
            Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
        </p>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Small</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-small</li>
            </ul>
        </div>

    </header>

    <div>
        <p class="copy is-small">
            Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
        </p>

    </div>

</section>


<!-- Default -->
<p class="copy {{#modifier}}{{{.}}}{{/modifier}}">
    {{{content}}}
</p>

<!-- Standfirst -->
<p class="copy {{#modifier}}{{{.}}}{{/modifier}}">
    {{{content}}}
</p>

<!-- Strong -->
<p class="copy {{#modifier}}{{{.}}}{{/modifier}}">
    {{{content}}}
</p>

<!-- Small -->
<p class="copy {{#modifier}}{{{.}}}{{/modifier}}">
    {{{content}}}
</p>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

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

    </header>

        {{#samples}}
    <div>
        {{render '@copy' (contextData '@copy' this) merge=true}}
    </div>
        {{/samples}}

</section>
    {{/variants}}
 
/* Default */
{
  "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}


/* Standfirst */
{
  "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
  "modifier": "is-standfirst"
}


/* Strong */
{
  "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
  "modifier": "is-strong"
}


/* Small */
{
  "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
  "modifier": "is-small"
}


/* Doc Only */
{
  "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
  "variants": [
    {
      "title": "Standfirst",
      "annotations": "Der erste Absatz in einem Artikel",
      "modifiers": "is-standfirst",
      "samples": {
        "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
        "modifier": "is-standfirst"
      }
    },
    {
      "title": "Strong",
      "annotations": "Hervorgehobener Absatz",
      "modifiers": "is-strong",
      "samples": {
        "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
        "modifier": "is-strong"
      }
    },
    {
      "title": "Default",
      "samples": {
        "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
      }
    },
    {
      "title": "Small",
      "modifiers": "is-small",
      "samples": {
        "content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
        "modifier": "is-small"
      }
    }
  ]
}
  • Content: 
    // Add fallback font families to token

@if meta.global-variable-exists(copy-styles--standfirst) {
    $copy-styles--standfirst: add-fallback-fonts($copy-styles--standfirst);
}

@import "_copy.settings";
@import "_copy.styles";

%copy--standfirst {
    margin-top: var(--sp-section) !important;
    margin-bottom: var(--sp-component);

    & + & {
        margin-top: var(--sp-large) !important;
    }

    h2 + &,
    h3 + & {
        margin-top: var(--sp-large) !important;
    }

}

%copy {

    a {
        @extend %link;
    }

}
  • URL: /components/raw/copy/_copy.scss
  • Filesystem Path: components/02-elements/copy/_copy.scss
  • Size: 535 Bytes
  • Content: 
    $copy_color--small: $_minor-color !default;

// Please regard: The following style definitions may will be overwritten
//   by "tokens.scss"

$copy_styles: (
    color: inherit, // FIXME: Empty style definition causes gulp-sass error
) !default;

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

$copy_styles--strong: (
    font-size: calc(1rem + 1px),
    line-height: calc(#{$_line-height} + 1px),
    font-weight: $_font-weight--bold,
) !default;

$copy_styles--small: (
    text-size: small,
    color: $_minor-color,
) !default;
  • URL: /components/raw/copy/_copy.settings.scss
  • Filesystem Path: components/02-elements/copy/_copy.settings.scss
  • Size: 586 Bytes
  • Content: 
    %copy {
    @include stack-spacing();
    @include styles($copy_styles);

    @if global-variable-exists(copy_styles--mobile) {

        @include not-on-desktop(){
            @include styles($copy_styles--mobile);
        }

    }

}

%copy--standfirst {
    @extend %copy;
    @include styles($copy_styles--standfirst);

    @if global-variable-exists(copy_styles--standfirst--mobile) {

        @include not-on-desktop(){
            @include styles($copy_styles--standfirst--mobile);
        }

    }

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

    strong, b {
        // Override Bootstrap’s value `bolder`
        font-weight: inherit;
    }

}

%copy--strong {
    @extend %copy;
    @include styles($copy_styles--strong);

    @if global-variable-exists(copy_styles--strong--mobile) {

        @include not-on-desktop(){
            @include styles($copy_styles--strong--mobile);
        }

    }

    strong, b {
        // Override Bootstrap’s value `bolder`
        font-weight: inherit;
    }

}

%copy--small {
    @extend %copy;

    color: $copy_color__small;
    @include styles($copy_styles--small);

    @if global-variable-exists(copy_styles--small--mobile) {

        @include not-on-desktop(){
            @include styles($copy_styles--small--mobile);
        }

    }

    a:link {
        color: inherit;
        text-decoration: underline;
    }

}

.copy {
   @extend %copy;

    &.is-standfirst {
        @extend %copy--standfirst;
    }

    &.is-strong {
        @extend %copy--strong;
    }

    &.is-small,
    &:has(> small),
    & small {
        @extend %copy--small;
    }

}
  • URL: /components/raw/copy/_copy.styles.scss
  • Filesystem Path: components/02-elements/copy/_copy.styles.scss
  • Size: 1.6 KB