PSI Software SE Design Library

Info Box

No notes defined.

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

    <header class="infoBox-header">

        <span class="infoBox-icon">
        </span>

        <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
    </header>

    <div class="infoBox-content">

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

    </div>

</div>


<!-- With Custom Icon -->
<div class="infoBox">

    <header class="infoBox-header">

        <span class="infoBox-icon">
            <svg class="icon is-confetti">
                <use href="../../icons/icons.svg#icon--confetti" xlink:href="../../icons/icons.svg#icon--confetti"></use>
            </svg>

        </span>

        <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
    </header>

    <div class="infoBox-content">

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

    </div>

</div>


<!-- With Custom Pictogram -->
<div class="infoBox">

    <div class="infoBox-content">

    </div>

</div>


<!-- With List -->
<div class="infoBox">

    <header class="infoBox-header">

        <span class="infoBox-icon">
        </span>

        <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
    </header>

    <div class="infoBox-content">

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

        <ul class="ul">
            <li>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</li>
            <li>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</li>
            <li>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.</li>
        </ul>

    </div>

</div>


<!-- With Checklist -->
<div class="infoBox">

    <header class="infoBox-header">

        <span class="infoBox-icon">
        </span>

        <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
    </header>

    <div class="infoBox-content">

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

        <ul class="checkList">
            <li class="checkList-item">Hashtag Echo Park selfies</li>
            <li class="checkList-item">PBR try-hard skateboard, <a href="#">plaid 8-bit</a></li>
            <li class="checkList-item">Flexitarian retro single-origin coffee</li>
            <li class="checkList-item">Church-key vinyl pug cardigan</li>
            <li class="checkList-item">Biodiesel locavore PBR<br /> try-hard skateboard</li>
            <li class="checkList-item">Plaid 8-bit</li>
            <li class="checkList-item">
                <p>Stumptown bicycle rights sus, pok pok austin coloring book roof party venmo biodiesel yes plz portland disrupt master cleanse sartorial taiyaki.</p>
                <p>8-bit viral man bun salvia locavore mixtape.</p>
            </li>
        </ul>

    </div>

</div>


<!-- Documententaion only -->
<section class="doc-variant">

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

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

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.infoBox', value: this.value});">
                    <option value="default">default</option>
                    <option value="information">information</option>
                    <option value="positive">positive</option>
                    <option value="warning">warning</option>
                    <option value="negative">negative</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples">

        <div class="infoBox">

            <header class="infoBox-header">

                <span class="infoBox-icon">
                </span>

                <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
            </header>

            <div class="infoBox-content">

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

            </div>

        </div>

    </div>

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

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

        <h2 class="doc-variant-title">With Custom Pictogram</h2>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.infoBox', value: this.value});">
                    <option value="default">default</option>
                    <option value="information">information</option>
                    <option value="positive">positive</option>
                    <option value="warning">warning</option>
                    <option value="negative">negative</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples">

        <div class="infoBox">

            <header class="infoBox-header">

                <span class="infoBox-icon">
                    <span class="pictogram is-large is-accent">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12.3095 5.05496C12.3514 4.9813 12.412 4.92005 12.4852 4.87746C12.5585 4.83487 12.6417 4.81245 12.7264 4.8125H15.1289C15.2139 4.81245 15.2974 4.835 15.3708 4.87784C15.4442 4.92069 15.5049 4.98228 15.5466 5.05631C15.5884 5.13033 15.6097 5.21413 15.6084 5.29911C15.607 5.38408 15.5831 5.46718 15.5391 5.53988L13.081 9.60417H15.6014C15.6949 9.60412 15.7863 9.63141 15.8645 9.68269C15.9427 9.73397 16.0041 9.80699 16.0413 9.89275C16.0785 9.97852 16.0897 10.0733 16.0737 10.1654C16.0577 10.2575 16.0151 10.3429 15.9512 10.4111L9.95778 16.8041C9.91966 16.8449 9.8685 16.8711 9.81312 16.8782C9.75774 16.8853 9.70163 16.8728 9.65447 16.8429C9.60732 16.813 9.57208 16.7676 9.55484 16.7145C9.53761 16.6614 9.53946 16.604 9.56007 16.5521L11.5419 11.5208H9.46807C9.38422 11.5209 9.30182 11.4989 9.22912 11.4571C9.15641 11.4154 9.09594 11.3553 9.05374 11.2828C9.01154 11.2103 8.9891 11.1281 8.98865 11.0442C8.98821 10.9604 9.00977 10.8779 9.0512 10.805L12.3095 5.05496Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M1.9375 4.11771V11.4365C1.96566 13.8548 2.73635 16.2061 4.1452 18.1719C5.55405 20.1376 7.53299 21.623 9.81404 22.4267L10.8883 22.8234C11.606 23.087 12.394 23.087 13.1117 22.8234L14.186 22.4267C16.467 21.623 18.446 20.1376 19.8548 18.1719C21.2637 16.2061 22.0343 13.8548 22.0625 11.4365V4.11771C22.0615 3.83016 21.9762 3.54922 21.8171 3.30971C21.658 3.0702 21.4321 2.88264 21.1674 2.77029C18.2643 1.55911 15.1455 0.949769 12 0.979164C8.85448 0.949769 5.73572 1.55911 2.83258 2.77029C2.5679 2.88264 2.342 3.0702 2.18289 3.30971C2.02379 3.54922 1.93846 3.83016 1.9375 4.11771Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </span>

                </span>

                <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
            </header>

            <div class="infoBox-content">

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

            </div>

        </div>

    </div>

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

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

        <h2 class="doc-variant-title">With List</h2>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.infoBox', value: this.value});">
                    <option value="default">default</option>
                    <option value="information">information</option>
                    <option value="positive">positive</option>
                    <option value="warning">warning</option>
                    <option value="negative">negative</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples">

        <div class="infoBox">

            <header class="infoBox-header">

                <span class="infoBox-icon">
                </span>

                <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
            </header>

            <div class="infoBox-content">

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

                <ul class="ul">
                    <li>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</li>
                    <li>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</li>
                    <li>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.</li>
                </ul>

            </div>

        </div>

    </div>

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

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

        <h2 class="doc-variant-title">With Checklist</h2>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.infoBox', value: this.value});">
                    <option value="default">default</option>
                    <option value="information">information</option>
                    <option value="positive">positive</option>
                    <option value="warning">warning</option>
                    <option value="negative">negative</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples">

        <div class="infoBox">

            <header class="infoBox-header">

                <span class="infoBox-icon">
                </span>

                <h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
            </header>

            <div class="infoBox-content">

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

                <ul class="checkList">
                    <li class="checkList-item">Hashtag Echo Park selfies</li>
                    <li class="checkList-item">PBR try-hard skateboard, <a href="#">plaid 8-bit</a></li>
                    <li class="checkList-item">Flexitarian retro single-origin coffee</li>
                    <li class="checkList-item">Church-key vinyl pug cardigan</li>
                    <li class="checkList-item">Biodiesel locavore PBR<br /> try-hard skateboard</li>
                    <li class="checkList-item">Plaid 8-bit</li>
                    <li class="checkList-item">
                        <p>Stumptown bicycle rights sus, pok pok austin coloring book roof party venmo biodiesel yes plz portland disrupt master cleanse sartorial taiyaki.</p>
                        <p>8-bit viral man bun salvia locavore mixtape.</p>
                    </li>
                </ul>

            </div>

        </div>

    </div>

</section>


<!-- Default -->
<div class="infoBox{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

        {{#if title}}
    <header class="infoBox-header">

        <span class="infoBox-icon">
            {{#icon}}
                {{render '@icon' (contextData '@infobox' this) merge=true}}
            {{/icon}}
            {{#pictogram}}
                {{render '@pictogram--large-accent' (contextData '@infobox' this) merge=true}}
            {{/pictogram}}
        </span>

            {{#title}}
        <h2 class="infoBox-title">{{{.}}}</h2>
            {{/title}}
    </header>
        {{/if}}

    <div class="infoBox-content">

        {{#content}}
            {{{.}}}
        {{/content}}

        {{#list}}
            {{render '@list' (contextData '@infobox' this) merge=true}}
        {{/list}}

        {{#checklist}}
            {{render '@checklist' (contextData '@infobox' this) merge=true}}
        {{/checklist}}

    </div>

</div>

<!-- With Custom Icon -->
<div class="infoBox{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

        {{#if title}}
    <header class="infoBox-header">

        <span class="infoBox-icon">
            {{#icon}}
                {{render '@icon' (contextData '@infobox' this) merge=true}}
            {{/icon}}
            {{#pictogram}}
                {{render '@pictogram--large-accent' (contextData '@infobox' this) merge=true}}
            {{/pictogram}}
        </span>

            {{#title}}
        <h2 class="infoBox-title">{{{.}}}</h2>
            {{/title}}
    </header>
        {{/if}}

    <div class="infoBox-content">

        {{#content}}
            {{{.}}}
        {{/content}}

        {{#list}}
            {{render '@list' (contextData '@infobox' this) merge=true}}
        {{/list}}

        {{#checklist}}
            {{render '@checklist' (contextData '@infobox' this) merge=true}}
        {{/checklist}}

    </div>

</div>

<!-- With Custom Pictogram -->
<div class="infoBox{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

        {{#if title}}
    <header class="infoBox-header">

        <span class="infoBox-icon">
            {{#icon}}
                {{render '@icon' (contextData '@infobox' this) merge=true}}
            {{/icon}}
            {{#pictogram}}
                {{render '@pictogram--large-accent' (contextData '@infobox' this) merge=true}}
            {{/pictogram}}
        </span>

            {{#title}}
        <h2 class="infoBox-title">{{{.}}}</h2>
            {{/title}}
    </header>
        {{/if}}

    <div class="infoBox-content">

        {{#content}}
            {{{.}}}
        {{/content}}

        {{#list}}
            {{render '@list' (contextData '@infobox' this) merge=true}}
        {{/list}}

        {{#checklist}}
            {{render '@checklist' (contextData '@infobox' this) merge=true}}
        {{/checklist}}

    </div>

</div>

<!-- With List -->
<div class="infoBox{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

        {{#if title}}
    <header class="infoBox-header">

        <span class="infoBox-icon">
            {{#icon}}
                {{render '@icon' (contextData '@infobox' this) merge=true}}
            {{/icon}}
            {{#pictogram}}
                {{render '@pictogram--large-accent' (contextData '@infobox' this) merge=true}}
            {{/pictogram}}
        </span>

            {{#title}}
        <h2 class="infoBox-title">{{{.}}}</h2>
            {{/title}}
    </header>
        {{/if}}

    <div class="infoBox-content">

        {{#content}}
            {{{.}}}
        {{/content}}

        {{#list}}
            {{render '@list' (contextData '@infobox' this) merge=true}}
        {{/list}}

        {{#checklist}}
            {{render '@checklist' (contextData '@infobox' this) merge=true}}
        {{/checklist}}

    </div>

</div>

<!-- With Checklist -->
<div class="infoBox{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>

        {{#if title}}
    <header class="infoBox-header">

        <span class="infoBox-icon">
            {{#icon}}
                {{render '@icon' (contextData '@infobox' this) merge=true}}
            {{/icon}}
            {{#pictogram}}
                {{render '@pictogram--large-accent' (contextData '@infobox' this) merge=true}}
            {{/pictogram}}
        </span>

            {{#title}}
        <h2 class="infoBox-title">{{{.}}}</h2>
            {{/title}}
    </header>
        {{/if}}

    <div class="infoBox-content">

        {{#content}}
            {{{.}}}
        {{/content}}

        {{#list}}
            {{render '@list' (contextData '@infobox' this) merge=true}}
        {{/list}}

        {{#checklist}}
            {{render '@checklist' (contextData '@infobox' this) merge=true}}
        {{/checklist}}

    </div>

</div>

<!-- Documententaion 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 themes}}
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.infoBox', value: this.value});">
                        {{#themes}}
                    <option value="{{{.}}}">{{{.}}}</option>
                        {{/themes}}
                </select>
            </label>
                {{/if}}
        </div>

    </header>

    <div class="doc-variant-samples"{{#theme}} data-theme="{{.}}"{{/theme}}>

        {{#samples}}
            {{render '@infobox' (contextData '@infobox' this) merge=true}}
        {{/samples}}

    </div>

</section>
    {{/variants}}
 
/* Default */
{
  "title": "Ich bin der Titel der Info-Box",
  "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}


/* With Custom Icon */
{
  "title": "Ich bin der Titel der Info-Box",
  "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
  "icon": {
    "id": "confetti"
  }
}


/* With Custom Pictogram */
[
  {
    "pictogram": {
      "id": "protection-shield-bolt",
      "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.3095 5.05496C12.3514 4.9813 12.412 4.92005 12.4852 4.87746C12.5585 4.83487 12.6417 4.81245 12.7264 4.8125H15.1289C15.2139 4.81245 15.2974 4.835 15.3708 4.87784C15.4442 4.92069 15.5049 4.98228 15.5466 5.05631C15.5884 5.13033 15.6097 5.21413 15.6084 5.29911C15.607 5.38408 15.5831 5.46718 15.5391 5.53988L13.081 9.60417H15.6014C15.6949 9.60412 15.7863 9.63141 15.8645 9.68269C15.9427 9.73397 16.0041 9.80699 16.0413 9.89275C16.0785 9.97852 16.0897 10.0733 16.0737 10.1654C16.0577 10.2575 16.0151 10.3429 15.9512 10.4111L9.95778 16.8041C9.91966 16.8449 9.8685 16.8711 9.81312 16.8782C9.75774 16.8853 9.70163 16.8728 9.65447 16.8429C9.60732 16.813 9.57208 16.7676 9.55484 16.7145C9.53761 16.6614 9.53946 16.604 9.56007 16.5521L11.5419 11.5208H9.46807C9.38422 11.5209 9.30182 11.4989 9.22912 11.4571C9.15641 11.4154 9.09594 11.3553 9.05374 11.2828C9.01154 11.2103 8.9891 11.1281 8.98865 11.0442C8.98821 10.9604 9.00977 10.8779 9.0512 10.805L12.3095 5.05496Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M1.9375 4.11771V11.4365C1.96566 13.8548 2.73635 16.2061 4.1452 18.1719C5.55405 20.1376 7.53299 21.623 9.81404 22.4267L10.8883 22.8234C11.606 23.087 12.394 23.087 13.1117 22.8234L14.186 22.4267C16.467 21.623 18.446 20.1376 19.8548 18.1719C21.2637 16.2061 22.0343 13.8548 22.0625 11.4365V4.11771C22.0615 3.83016 21.9762 3.54922 21.8171 3.30971C21.658 3.0702 21.4321 2.88264 21.1674 2.77029C18.2643 1.55911 15.1455 0.949769 12 0.979164C8.85448 0.949769 5.73572 1.55911 2.83258 2.77029C2.5679 2.88264 2.342 3.0702 2.18289 3.30971C2.02379 3.54922 1.93846 3.83016 1.9375 4.11771Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
    }
  }
]


/* With List */
{
  "title": "Ich bin der Titel der Info-Box",
  "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
  "list": {
    "items": [
      "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
      "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.",
      "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."
    ]
  }
}


/* With Checklist */
{
  "title": "Ich bin der Titel der Info-Box",
  "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
  "checklist": {
    "items": [
      "Hashtag Echo Park selfies",
      "PBR try-hard skateboard, <a href=\"#\">plaid 8-bit</a>",
      "Flexitarian retro single-origin coffee",
      "Church-key vinyl pug cardigan",
      "Biodiesel locavore PBR<br/> try-hard skateboard",
      "Plaid 8-bit",
      "<p>Stumptown bicycle rights sus, pok pok austin coloring book roof party venmo biodiesel yes plz portland disrupt master cleanse sartorial taiyaki.</p><p>8-bit viral man bun salvia locavore mixtape.</p>"
    ]
  }
}


/* Documententaion only */
{
  "title": "Ich bin der Titel der Info-Box",
  "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> 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": "Default",
      "themes": [
        "default",
        "information",
        "positive",
        "warning",
        "negative"
      ],
      "samples": {
        "title": "Ich bin der Titel der Info-Box",
        "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
      }
    },
    {
      "title": "With Custom Pictogram",
      "themes": [
        "default",
        "information",
        "positive",
        "warning",
        "negative"
      ],
      "samples": [
        {
          "pictogram": {
            "id": "protection-shield-bolt",
            "code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.3095 5.05496C12.3514 4.9813 12.412 4.92005 12.4852 4.87746C12.5585 4.83487 12.6417 4.81245 12.7264 4.8125H15.1289C15.2139 4.81245 15.2974 4.835 15.3708 4.87784C15.4442 4.92069 15.5049 4.98228 15.5466 5.05631C15.5884 5.13033 15.6097 5.21413 15.6084 5.29911C15.607 5.38408 15.5831 5.46718 15.5391 5.53988L13.081 9.60417H15.6014C15.6949 9.60412 15.7863 9.63141 15.8645 9.68269C15.9427 9.73397 16.0041 9.80699 16.0413 9.89275C16.0785 9.97852 16.0897 10.0733 16.0737 10.1654C16.0577 10.2575 16.0151 10.3429 15.9512 10.4111L9.95778 16.8041C9.91966 16.8449 9.8685 16.8711 9.81312 16.8782C9.75774 16.8853 9.70163 16.8728 9.65447 16.8429C9.60732 16.813 9.57208 16.7676 9.55484 16.7145C9.53761 16.6614 9.53946 16.604 9.56007 16.5521L11.5419 11.5208H9.46807C9.38422 11.5209 9.30182 11.4989 9.22912 11.4571C9.15641 11.4154 9.09594 11.3553 9.05374 11.2828C9.01154 11.2103 8.9891 11.1281 8.98865 11.0442C8.98821 10.9604 9.00977 10.8779 9.0512 10.805L12.3095 5.05496Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M1.9375 4.11771V11.4365C1.96566 13.8548 2.73635 16.2061 4.1452 18.1719C5.55405 20.1376 7.53299 21.623 9.81404 22.4267L10.8883 22.8234C11.606 23.087 12.394 23.087 13.1117 22.8234L14.186 22.4267C16.467 21.623 18.446 20.1376 19.8548 18.1719C21.2637 16.2061 22.0343 13.8548 22.0625 11.4365V4.11771C22.0615 3.83016 21.9762 3.54922 21.8171 3.30971C21.658 3.0702 21.4321 2.88264 21.1674 2.77029C18.2643 1.55911 15.1455 0.949769 12 0.979164C8.85448 0.949769 5.73572 1.55911 2.83258 2.77029C2.5679 2.88264 2.342 3.0702 2.18289 3.30971C2.02379 3.54922 1.93846 3.83016 1.9375 4.11771Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
          }
        }
      ]
    },
    {
      "title": "With List",
      "themes": [
        "default",
        "information",
        "positive",
        "warning",
        "negative"
      ],
      "samples": {
        "title": "Ich bin der Titel der Info-Box",
        "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
        "list": {
          "items": [
            "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
            "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.",
            "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."
          ]
        }
      }
    },
    {
      "title": "With Checklist",
      "themes": [
        "default",
        "information",
        "positive",
        "warning",
        "negative"
      ],
      "samples": {
        "title": "Ich bin der Titel der Info-Box",
        "content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
        "checklist": {
          "items": [
            "Hashtag Echo Park selfies",
            "PBR try-hard skateboard, <a href=\"#\">plaid 8-bit</a>",
            "Flexitarian retro single-origin coffee",
            "Church-key vinyl pug cardigan",
            "Biodiesel locavore PBR<br/> try-hard skateboard",
            "Plaid 8-bit",
            "<p>Stumptown bicycle rights sus, pok pok austin coloring book roof party venmo biodiesel yes plz portland disrupt master cleanse sartorial taiyaki.</p><p>8-bit viral man bun salvia locavore mixtape.</p>"
          ]
        }
      }
    }
  ]
}
  • Content: 
    $infoBox_icon_size: $pictogram_size--large !default;
$infoBox_icon_container_size: $pictogram_container_size--large !default;

$infoBox_icon_stroke-width: get-stroke-width($pictogram_stroke-width--large, $infoBox_icon_size, 48px) !default;

@import "_infoBox.settings";
@import "_infoBox.styles";
  • URL: /components/raw/infobox/_infoBox.scss
  • Filesystem Path: components/04-modules/infoBox/_infoBox.scss
  • Size: 297 Bytes
  • Content: 
    $infoBox_icon_stroke-width: 3 !default;

$infoBox_icons: (
    default: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$infoBox_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M18 21H30M18 27H30M8.46563 43.1456C8.24715 43.3294 7.98076 43.447 7.69774 43.4847C7.41473 43.5223 7.12686 43.4784 6.86794 43.3581C6.60902 43.2378 6.38981 43.0461 6.23606 42.8055C6.08232 42.565 6.00042 42.2855 6 42V12C6 11.6022 6.15804 11.2206 6.43934 10.9393C6.72064 10.658 7.10218 10.5 7.5 10.5H40.5C40.8978 10.5 41.2794 10.658 41.5607 10.9393C41.842 11.2206 42 11.6022 42 12V36C42 36.3978 41.842 36.7794 41.5607 37.0607C41.2794 37.342 40.8978 37.5 40.5 37.5H15.4688C15.1154 37.5001 14.7734 37.6249 14.5031 37.8525L8.46563 43.1456Z"/></svg>',
    information: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$infoBox_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="9" r="4.5"/><path d="M16.5 19.5V25.5H20.25V37.5H16.5V43.5H31.5V37.5H27.75V19.5H16.5Z"/></svg>',
    warning: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$infoBox_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M24.0002 26V18.5M26.7021 6.54125L43.1008 35.0169C44.2502 37.0231 42.7652 39.5 40.3989 39.5H7.60144C5.23519 39.5 3.75019 37.0231 4.89956 35.0169L21.2983 6.54125C22.4796 4.48625 25.5208 4.48625 26.7021 6.54125Z"/><circle cx="24" cy="32.75" r="0.75"/></svg>',
    positive: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$infoBox_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 25.5L21 30L31.5 19.5M10.2112 37.7887C8.48625 36.0637 9.63 32.4394 8.7525 30.3169C7.84125 28.125 4.5 26.3438 4.5 24C4.5 21.6562 7.84125 19.875 8.7525 17.6831C9.63 15.5625 8.48625 11.9362 10.2112 10.2112C11.9362 8.48625 15.5625 9.63 17.6831 8.7525C19.8844 7.84125 21.6562 4.5 24 4.5C26.3438 4.5 28.125 7.84125 30.3169 8.7525C32.4394 9.63 36.0637 8.48625 37.7887 10.2112C39.5137 11.9362 38.37 15.5606 39.2475 17.6831C40.1588 19.8844 43.5 21.6562 43.5 24C43.5 26.3438 40.1588 28.125 39.2475 30.3169C38.37 32.4394 39.5137 36.0637 37.7887 37.7887C36.0637 39.5137 32.4394 38.37 30.3169 39.2475C28.125 40.1588 26.3438 43.5 24 43.5C21.6562 43.5 19.875 40.1588 17.6831 39.2475C15.5625 38.37 11.9362 39.5137 10.2112 37.7887Z"/></svg>',
    negative: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="{{color}}" stroke-width="#{$infoBox_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M30 3L27 18L39 22.5L18 45L21 30L9 25.5L30 3Z"/></svg>',
) !default;
  • URL: /components/raw/infobox/_infoBox.settings.scss
  • Filesystem Path: components/04-modules/infoBox/_infoBox.settings.scss
  • Size: 2.9 KB
  • Content: 
    .infoBox {
    @include stack-spacing(component);

    @include box-padding(large);
    padding-block: calc(.8 * var(--bp-large));
    @include border-radius(default, (border-top-left-radius, border-top-right-radius));

    background-color: var(--backdrop-color, #{$_backdrop-color});
    border-bottom: solid var(--bw) var(--border-color, #{$_accent-color});

    &-header {
        display: flex;
        align-items: center;
        column-gap: 2ch;
    }

    &-icon {
        display: block;
        height: $infoBox_icon_container_size;
        width: $infoBox_icon_container_size;
        flex-shrink: 0;

        display: flex;
        justify-content: center;
        align-items: center;

        background-color: var(--accent-color);
        color: var(--color);
        border-radius: 100vmax;

        position: relative;
        z-index: 1;

        &::after {
            content: "";

            position: absolute;
            inset: 0;
            z-index: -1;

            background-repeat: no-repeat;
            background-position: center;
            background-size: $infoBox_icon_size;
            background-image: svg-url(map.get($infoBox_icons, default), $_text-color);

            @supports (mask-image: url()) {
                background-image: none;
                background-color: currentcolor;

                mask-image: svg-url(map.get($infoBox_icons, default), black);
                mask-repeat: no-repeat;
                mask-position: center center;
                mask-size: $infoBox_icon_size;
            }

        }

        .icon,
        .pictogram {
            background-color: inherit;
            width: $infoBox_icon_size;
            height: $infoBox_icon_size;
        }

    }

    $themes: (
        information,
        warning,
        positive,
        negative,
    );

    @each $theme in $themes {

        @if $theme == "information" or $theme == "negative" {

            &[data-theme="#{$theme}"] &-icon {
                color: $_page-color;
            }

        }

        &[data-theme="#{$theme}"] &-icon::after {
            background-image: svg-url(map.get($infoBox_icons, $theme), $_text-color);
        }

    }

    @supports (mask-image: url()) {

        @each $theme in $themes {

            &[data-theme="#{$theme}"] &-icon::after {
                background-image: none;
                mask-image: svg-url(map.get($infoBox_icons, $theme), black);
            }

        }

    }

    &-title {
        @extend %heading--subheading;
        @include stack-spacing(0);
    }

    &-content {
        @extend %richtextBlock;

        @include text-size(small);

        > *:first-child {
            @include stack-spacing(0);
        }
    }

    ul:not(.checkList) {
        @extend %ul;
        padding-left: calc(#{$infoBox_icon_container_size} / 2);

        li {
            margin-left: calc(-1 * (#{$list_ident} + #{math.div($list_marker_size, 2)}));
        }

    }

    ol:not(.checkList) {
        @extend %ol;
    }

    .checkList {
        padding-left: math.div($infoBox_icon_container_size - $checkList_icon_size, 2);
    }

    .list-item {
        @include text-size(small);
    }

}
  • URL: /components/raw/infobox/_infoBox.styles.scss
  • Filesystem Path: components/04-modules/infoBox/_infoBox.styles.scss
  • Size: 3.2 KB