Alpaca components for Magento 2

Information 

<div class="information ">

        <h5 class="heading heading--fifth-level information__title">
            Balance
        </h5>

        <p class="information__text">
            Your balance is: $0.00
        </p>
    </div>
    <div class="information ">

        <h5 class="heading heading--fifth-level information__title">
            Redeem Gift Card
        </h5>

        <p class="information__text">
            Have a gift card? Click here to redeem it.
        </p>
    </div>
 
{{#each informations }}
    <div class="information {{ class }}">

        {{ render '@heading' heading }}

        <p class="information__text">
            {{ text }}
        </p>
    </div>
{{/each}}
 
{
  "informations": [
    {
      "heading": {
        "tag": "h5",
        "class": "heading heading--fifth-level information__title",
        "text": "Balance"
      },
      "text": "Your balance is: $0.00"
    },
    {
      "heading": {
        "tag": "h5",
        "class": "heading heading--fifth-level information__title",
        "text": "Redeem Gift Card"
      },
      "text": "Have a gift card? Click here to redeem it."
    }
  ]
}
  • Content: 
    $information-margin: $spacer !default;

.information {
    margin-bottom: $information-margin * 2;

    &__title {
        margin-bottom: $information-margin;
    }

    &__text {
        @extend .paragraph;
        margin-bottom: 0;
        font-style: normal;
    }
}
  • URL: /components/raw/information/_information.scss
  • Filesystem Path: build/components/Molecules/information/_information.scss
  • Size: 270 Bytes

No notes defined.