PSI Software SE Design Library

Kicker

No notes defined.

<!-- Default -->
<span class="kicker">
    Thema
</span>


<!-- Large -->
<span class="kicker is-large">
    Thema
</span>


<!-- Multiple -->
<span class="kicker">
    <span class="kicker-item">Echo Park</span>
    <span class="kicker-item">Selfies</span>
    <span class="kicker-item">Flexitarian</span>
</span>


<!-- Multiple Large -->
<span class="kicker is-large">
    <span class="kicker-item">Echo Park</span>
    <span class="kicker-item">Selfies</span>
    <span class="kicker-item">Flexitarian</span>
</span>


<!-- Documenation only -->
<section class="doc-variant" style="margin-bottom: var(--sp)">

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

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

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

    </header>

    <span class="kicker">
        Thema
    </span>

    <span class="kicker">
        <span class="kicker-item">Echo Park</span>
        <span class="kicker-item">Selfies</span>
        <span class="kicker-item">Flexitarian</span>
    </span>

</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">

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

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

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

    </header>

    <span class="kicker is-large">
        Thema
    </span>

    <span class="kicker is-large">
        <span class="kicker-item">Echo Park</span>
        <span class="kicker-item">Selfies</span>
        <span class="kicker-item">Flexitarian</span>
    </span>

</section>


<!-- Default -->
<span class="kicker{{#modifier}} {{.}}{{/modifier}}">
    {{#unless items}}
        {{#content}}{{{.}}}{{/content}}
    {{else}}
        {{#items}}
    <span class="kicker-item">{{{.}}}</span>
        {{/items}}
    {{/unless}}
</span>

<!-- Large -->
<span class="kicker{{#modifier}} {{.}}{{/modifier}}">
    {{#unless items}}
        {{#content}}{{{.}}}{{/content}}
    {{else}}
        {{#items}}
    <span class="kicker-item">{{{.}}}</span>
        {{/items}}
    {{/unless}}
</span>

<!-- Multiple -->
<span class="kicker{{#modifier}} {{.}}{{/modifier}}">
    {{#unless items}}
        {{#content}}{{{.}}}{{/content}}
    {{else}}
        {{#items}}
    <span class="kicker-item">{{{.}}}</span>
        {{/items}}
    {{/unless}}
</span>

<!-- Multiple Large -->
<span class="kicker{{#modifier}} {{.}}{{/modifier}}">
    {{#unless items}}
        {{#content}}{{{.}}}{{/content}}
    {{else}}
        {{#items}}
    <span class="kicker-item">{{{.}}}</span>
        {{/items}}
    {{/unless}}
</span>

<!-- Documenation only -->
{{#variants}}
<section class="doc-variant" style="margin-bottom: var(--sp)">

    <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}}
        {{render '@kicker' (contextData '@kicker' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}
 
/* Default */
{
  "content": "Thema"
}


/* Large */
{
  "content": "Thema",
  "modifier": "is-large"
}


/* Multiple */
{
  "content": null,
  "items": [
    "Echo Park",
    "Selfies",
    "Flexitarian"
  ]
}


/* Multiple Large */
{
  "content": null,
  "modifier": "is-large",
  "items": [
    "Echo Park",
    "Selfies",
    "Flexitarian"
  ]
}


/* Documenation only */
{
  "content": "Thema",
  "variants": [
    {
      "title": "Default",
      "samples": [
        {
          "content": "Thema"
        },
        {
          "content": null,
          "items": [
            "Echo Park",
            "Selfies",
            "Flexitarian"
          ]
        }
      ]
    },
    {
      "title": "Large",
      "modifiers": "is-large",
      "samples": [
        {
          "content": "Thema",
          "modifier": "is-large"
        },
        {
          "content": null,
          "modifier": "is-large",
          "items": [
            "Echo Park",
            "Selfies",
            "Flexitarian"
          ]
        }
      ]
    }
  ]
}
  • Content: 
    $kicker_styles: (
    text-size: small,
    font-weight: $_font-weight--semibold,
) !default;

@import "_kicker.settings";
@import "_kicker.styles";

%kicker--large {
    @include text-size();

    %kicker-item {

        &::before {
            width: 2px;
        }

    }

}

.kicker.is-large {
    @extend %kicker--large;
}
  • URL: /components/raw/kicker/_kicker.scss
  • Filesystem Path: components/02-elements/kicker/_kicker.scss
  • Size: 328 Bytes
  • Content: 
    $kicker_styles: (
    text-size: small,
    text-transform: uppercase,
    letter-spacing: .1em,
) !default;

$kicker_gutter: .6em !default;
  • URL: /components/raw/kicker/_kicker.settings.scss
  • Filesystem Path: components/02-elements/kicker/_kicker.settings.scss
  • Size: 141 Bytes
  • Content: 
    %kicker {
    @include stack-spacing();

    list-style: none;
    padding-left: 0;

    display: flex;
    column-gap: (2 * $kicker_gutter);
    flex-wrap: wrap;
    align-content: center;

    overflow: hidden;

    @include styles($kicker_styles);

    &-item {
        position: relative;

        &::before {
            content: "";

            display: block;
            height: 66.67%;
            width: 2px;

            position: absolute;
            top: 50%;
            left: calc(-1 * #{$kicker_gutter});

            transform: translate(-50%, -50%);

            background-color: currentcolor;
        }

    }

}

.kicker {
    @extend %kicker;

    &-item {
        @extend %kicker-item;
    }

}
  • URL: /components/raw/kicker/_kicker.styles.scss
  • Filesystem Path: components/02-elements/kicker/_kicker.styles.scss
  • Size: 720 Bytes