Mockup Inset

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


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

    <div class="mockupInset-figure">
        <div class="productMockup">

            <div class="productMockup-figure">
                <figure class="figure" style="">

                    <a href="../../#.html">
                        <img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />

                    </a>

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>

                </figure>

            </div>

        </div>

    </div>

</div>


        
            <!-- Tablet -->
<div class="mockupInset">

    <div class="mockupInset-figure">
        <div class="productMockup" data-device="tablet">

            <div class="productMockup-figure">
                <figure class="figure" style="">

                    <a href="../../#.html">
                        <img class="figure-image" src="../../images/productMockup/sample-screenshot-tablet.png" alt="Ich bin eine Produktabbildung" />

                    </a>

                    <figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>

                </figure>

            </div>

        </div>

    </div>

</div>

Handle: @mockupinset
Variants (2): Default , Tablet
Preview:
- With layout
- Component only
Filesystem Path: components/04-modules/mockupInset/mockupInset.html
References (2): @productmockup, @mockupinset
Referenced by (2): @workflowsdetail, @mockupinset--tablet


        <div class="mockupInset{{#modifier}} {{.}}{{/modifier}}">

    <div class="mockupInset-figure">
        {{#productmockup}}
            {{render '@productmockup' (contextData '@mockupinset' this) merge=true}}
        {{/productmockup}}
    </div>

</div>


        
        
            /* Default */
{
  "productmockup": {
    "figure": {
      "src": "/images/productMockup/sample-screenshot-desktop.png",
      "alt": "Ich bin eine Produktabbildung",
      "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
      "link": {
        "label": "Details anzeigen",
        "url": "#"
      }
    }
  }
}


        
            /* Tablet */
{
  "productmockup": {
    "figure": {
      "src": "/images/productMockup/sample-screenshot-tablet.png",
      "alt": "Ich bin eine Produktabbildung",
      "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
      "link": {
        "label": "Details anzeigen",
        "url": "#"
      }
    },
    "device": "tablet"
  }
}

File:

Content:


                                @import "_mockupInset.settings";
@import "_mockupInset.styles";

URL: /components/raw/mockupinset/_mockupInset.scss
Filesystem Path: components/04-modules/mockupInset/_mockupInset.scss
Size: 64 Bytes

Content:


                                $mockupInset_styles: (
    font-family: monospace,
    background-color: lightgray,
) !default;

URL: /components/raw/mockupinset/_mockupInset.settings.scss
Filesystem Path: components/04-modules/mockupInset/_mockupInset.settings.scss
Size: 96 Bytes

Content:


                                .mockupInset {
    @include stack-spacing(section);

    .productMockup {
        @include stack-spacing(0);
    }

    @include only-on-desktop(){
        width: get-columns-width(8);
        margin-left: auto;
        margin-right: auto;
    }

}

URL: /components/raw/mockupinset/_mockupInset.styles.scss
Filesystem Path: components/04-modules/mockupInset/_mockupInset.styles.scss
Size: 249 Bytes