@yola/ws-component-block v6.3.0

ws-block

Component loads template by src url and replaces <slot name="${SLOT_NAME}"></slot> elements with corresponding child nodes (nodes with attribute slote=${SLOT_NAME}) and render inside the result.

Configuration attributes

Usage

<!-- block -->
<ws-block src="/path/to/template.html" background-image="/test.png">
  <div class="block-suptitle" slot="block-suptitle">
    block-suptitle
  </div>

  <h2 class="block-title" slot="block-title">
    block-title
  </h2>

  <p class="block-subtitle" slot="block-subtitle">
    block-subtitle
  </p>
</ws-block>

<!-- template -->
<section
  class="block-features-icon-list-4-col section-lg-padding"
  data-ws-block-background-target
>
  <div class="block-top"></div>
  <div class="container">
    <slot name="block-suptitle"></slot>
    <slot name="block-title"></slot>
    <slot name="block-subtitle"></slot>
  </div>
  <div class="block-bottom"></div>
</section>

<!-- result -->
<ws-block src="/path/to/template.html" background-image="/test.png">
  <section
    class="block-features-icon-list-4-col section-lg-padding"
    data-ws-block-background-target
    style="background-image: url(/test.png);"
  >
    <div class="block-top"></div>
    <div class="container">
      <div class="block-suptitle" slot="block-suptitle">
        block-suptitle
      </div>
      <h2 class="block-title" slot="block-title">
        block-title
      </h2>
      <p class="block-subtitle" slot="block-subtitle">
        block-subtitle
      </p>
    </div>
    <div class="block-bottom"></div>
  </section>
</ws-block>