PSI Software SE Design Library

Card

No notes defined.

<!-- Default -->
<div class="card">

    <div class="card-content">
        <p>Cardigan Pinterest gentrify, 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>

</div>


<!-- Small -->
<div class="card is-small">

    <div class="card-content">
        <small>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</small>
    </div>

</div>


<!-- Large -->
<div class="card is-large">

    <div class="card-content">
        <p>Cardigan Pinterest gentrify, 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>

</div>


<!-- Doc Only -->
<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 class="card is-small">

        <div class="card-content">
            <small>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</small>
        </div>

    </div>

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

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

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

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

    </header>

    <div class="card">

        <div class="card-content">
            <p>Cardigan Pinterest gentrify, 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>

    </div>

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

    <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>

    <div class="card is-large">

        <div class="card-content">
            <p>Cardigan Pinterest gentrify, 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>

    </div>

</section>


<!-- Default -->
<div class="card{{#modifier}} {{.}}{{/modifier}}">

    <div class="card-content">
        {{{content}}}
    </div>

</div>

<!-- Small -->
<div class="card{{#modifier}} {{.}}{{/modifier}}">

    <div class="card-content">
        {{{content}}}
    </div>

</div>

<!-- Large -->
<div class="card{{#modifier}} {{.}}{{/modifier}}">

    <div class="card-content">
        {{{content}}}
    </div>

</div>

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

</section>
    {{/variants}}
 
/* Default */
{
  "content": "<p>Cardigan Pinterest gentrify, 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>\n"
}


/* Small */
{
  "content": "<small>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</small>",
  "modifier": "is-small"
}


/* Large */
{
  "content": "<p>Cardigan Pinterest gentrify, 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>\n",
  "modifier": "is-large"
}


/* Doc Only */
{
  "content": "<p>Cardigan Pinterest gentrify, 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>\n",
  "variants": [
    {
      "title": "Small",
      "modifiers": "is-small",
      "samples": {
        "content": "<small>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</small>",
        "modifier": "is-small"
      }
    },
    {
      "title": "Medium (Default)",
      "samples": {
        "content": "<p>Cardigan Pinterest gentrify, 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>\n"
      }
    },
    {
      "title": "Large",
      "modifiers": "is-large",
      "samples": {
        "content": "<p>Cardigan Pinterest gentrify, 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>\n",
        "modifier": "is-large"
      }
    }
  ]
}
  • Content: 
    @import "_card.settings";
@import "_card.styles";

%card {
    box-shadow: none;

    &-content {

        > h2, > h3, > h4, > h5, > h6, > p, > ul, > ol, > dl {

            &:first-child {
                margin-top: -.25em !important;
            }

            &:last-child {
                margin-bottom: -.25em !important;
            }

        }

        > * + * {
            @include stack-spacing(small);
        }

    }

}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: components/02-elements/card/_card.scss
  • Size: 436 Bytes
  • Content: 
    $card_background-color: $_backdrop-color !default;

$card_styles: (
    background-color: $card_background-color,
) !default;
  • URL: /components/raw/card/_card.settings.scss
  • Filesystem Path: components/02-elements/card/_card.settings.scss
  • Size: 126 Bytes
  • Content: 
    %card {
    @include stack-spacing();
    @include box-padding();
    @include border-radius();
    @include box-shadow();

    overflow: hidden;

    @include styles($card_styles);

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

}

%card-content {

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

    > *:last-child {
        margin-bottom: 0 !important;
    }

}

%card--small {
    @extend %card;
    @include box-padding(small);
    @include border-radius(small);
}

%card--large {
    @extend %card;
    @include box-padding(large);
    @include border-radius(large);
}

.card {
    @extend %card;

    &-content {
        @extend %card-content;
    }

    &.is-small {
        @extend %card--small;
    }

    &.is-large {
        @extend %card--large;
    }

}
  • URL: /components/raw/card/_card.styles.scss
  • Filesystem Path: components/02-elements/card/_card.styles.scss
  • Size: 788 Bytes