@biggive/components 1.0.187 → 1.0.189

package/dist/collection/components/biggive-main-menu/biggive-main-menu.js

@@ -0,0 +1,111 @@
+import { Host, h } from '@stencil/core';
+export class BiggiveMainMenu {
+  constructor() {
+    this.openMobileMenu = () => {
+      const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
+      mobileMenu.style.left = '0';
+    };
+    this.closeMobileMenu = () => {
+      const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
+      mobileMenu.style.left = '-100%';
+    };
+  }
+  async closeMobileMenuFromOutside() {
+    const mobileMenu = this.host.shadowRoot.querySelector('.nav-links');
+    mobileMenu.style.left = '-100%';
+  }
+  appendPrimaryNavigationLinks() {
+    // get the slotted 'nav-primary' node
+    const node = this.host.querySelector(`[slot="nav-primary"]`);
+    if (node !== null) {
+      // Slot the menu
+      this.host.shadowRoot.querySelector('#nav-primary').appendChild(node);
+    }
+  }
+  /**
+   * Slots the 'nav-secondary' slot into the top right corner of the blue nav bar.
+   * Also slots the 'nav-secondary' into the normal menu items when in mobile mode.
+   * This is because the blue bar disappears in mobile mode, so we need the items
+   * init to still be seen, hence they're auto-added to the menu.
+   */
+  appendNavSecondaryLinks() {
+    // get the slotted 'nav-secondary' node
+    const node = this.host.querySelector(`[slot="nav-secondary"]`);
+    if (node !== null) {
+      // add to blue bar
+      this.host.shadowRoot.querySelector('.nav-secondary').appendChild(node);
+      // we must make a deep clone of the node above, because each node is only
+      // injectable / slottable into one place, but we need to slot into two places.
+      const nodeClone = node.cloneNode(true);
+      // add to main menu links, but only viewable in mobile mode. The css class
+      // hides them in desktop!
+      nodeClone.querySelectorAll('li').forEach(child => {
+        child.classList.add('mobile-only');
+        this.host.shadowRoot.querySelector('.links').appendChild(child);
+      });
+    }
+  }
+  componentDidRender() {
+    const subMenuElements = this.host.querySelectorAll('.sub-menu');
+    subMenuElements.forEach(subMenuElement => {
+      // the subMenuLink is a sibling element to the actual sub-menu
+      const subMenuLink = subMenuElement.parentElement.querySelector('a');
+      subMenuLink.onclick = () => {
+        const subMenuArrow = subMenuLink.querySelector('.sub-menu-arrow');
+        subMenuArrow.classList.toggle('transform-90');
+        subMenuElement.classList.toggle('display-sub-menu');
+      };
+    });
+    const subSubMenuElements = this.host.querySelectorAll('.sub-sub-menu');
+    subSubMenuElements.forEach(subSubMenuElement => {
+      // the subSubMenuLink is a sibling element to the actual sub-sub-menu
+      const subSubMenuLink = subSubMenuElement.parentElement.querySelector('a');
+      subSubMenuLink.onclick = () => {
+        const subMenuArrow = subSubMenuLink.querySelector('.sub-sub-menu-arrow');
+        subMenuArrow.classList.toggle('transform-90');
+        subSubMenuElement.classList.toggle('display-sub-menu');
+      };
+    });
+    this.appendPrimaryNavigationLinks();
+    this.appendNavSecondaryLinks();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "row row-top" }, h("div", { class: "social-icon-wrap" }, h("slot", { name: "social-icons" })), h("div", { class: "nav-secondary" })), h("nav", { role: "navigation" }, h("div", { class: "navbar" }, h("biggive-misc-icon", { class: "bx bx-menu", "background-colour": "white", "icon-colour": "black", icon: "MenuOpen", onClick: this.openMobileMenu }), h("div", { class: "logo" }, h("a", { href: "#" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })))), h("div", { class: "nav-links" }, h("div", { class: "sidebar-logo" }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 140.9 30", id: "mobileLogo" }, h("path", { d: "M51.9,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3C53.6,0,55,1.4,55,3S53.6,6.1,51.9,6.1z M49.3,23.8h5V7.7h-5V23.8z M68.5,7.7v1 c-0.8-0.7-2.3-1.4-4.1-1.4c-4.5,0-8.2,3.2-8.2,7.9c0,4.7,3.7,7.9,8.2,7.9c1.8,0,3.4-0.5,4.1-1.4v0.9c0,2.1-1.9,3.1-4.4,3.1 c-2.2,0-4-0.5-5.8-1.4V29c2.1,0.7,4.4,1,6,1c5,0,9.2-2,9.2-7.3v-15L68.5,7.7L68.5,7.7z M68.5,17.2c-0.7,1-1.9,1.4-3.2,1.4 c-2.1,0-3.8-1.2-3.8-3.4c0-2.2,1.7-3.4,3.8-3.4c1.3,0,2.5,0.6,3.2,1.5V17.2z M88.1,24.2c4,0,6.4-0.7,8.5-2V10h-11v4.7h5.8v4.1 c-0.8,0.2-1.8,0.4-3.2,0.4c-4.9,0-7.3-3.2-7.3-6.8c0-3.7,2.8-6.8,8-6.8c2.2,0,4.3,0.6,5.8,1.4V1.7c-1.5-0.6-3.4-1.1-6.1-1.1 c-7.6,0-13,5.3-13,11.8C75.5,19.1,80.4,24.2,88.1,24.2z M101.4,6.1c-1.7,0-3.1-1.4-3.1-3s1.4-3,3.1-3c1.8,0,3.2,1.4,3.2,3 S103.1,6.1,101.4,6.1z M98.8,23.8h5V7.7h-5V23.8z M115.1,15l-4.3-7.2H105l10.1,16.4l10.1-16.4h-5.8L115.1,15z M129.3,16.9h11.6 c0.1-7-4.2-9.5-8.4-9.5c-4.5,0-8.5,2.6-8.6,8.4c0,5.6,4.1,8.4,9.1,8.4c2.2,0,4.4-0.3,6.4-1.3v-4.4c-2.5,1.4-4.1,1.4-5.6,1.4 C131.7,19.8,129.5,19.2,129.3,16.9z M132.5,11.1c1.5,0,2.8,0.7,3,2.7h-6.2C129.6,11.9,131,11.1,132.5,11.1z M43.5,11.4 c1.2-1,1.8-2.4,1.8-4c0-3.1-3-6.3-7.3-6.3h-8v22.8h10.4c4.1,0,7.2-3,7.2-6.8C47.5,14.8,46.5,12.3,43.5,11.4z M35.2,5.7h2.4 C39,5.7,40,6.8,40,8c0,1.2-1,2.2-2.5,2.2h-2.4V5.7z M39.9,19.2h-4.7v-4.6h4.7c1.4,0,2.5,1,2.5,2.3C42.4,18.1,41.3,19.2,39.9,19.2z" }), h("path", { d: "M13.5,1l13.5,23H0L13.5,1z" })), h("biggive-misc-icon", { class: "bx bx-x", "background-colour": "transparent", "icon-colour": "black", icon: "MenuClose", onClick: this.closeMobileMenu })), h("div", { id: "nav-primary" }), h("div", { class: "mobile-social-icon-wrap mobile-only" }, h("slot", { name: "mobile-social-icons" })))))));
+  }
+  static get is() { return "biggive-main-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-main-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-main-menu.css"]
+    };
+  }
+  static get methods() {
+    return {
+      "closeMobileMenuFromOutside": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/biggive-main-menu/biggive-main-menu.stories.js

@@ -0,0 +1,126 @@
+export default {
+  title: 'Components/Header and Footer',
+};
+const Template = () => `
+    <biggive-main-menu>
+        <div slot="social-icons">
+            <biggive-social-icon service="Facebook" url="https://www.facebook.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="Twitter" url="https://www.twitter.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="LinkedIn" url="https://www.linkedin.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="YouTube" url="https://www.youtube.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="Instagram" url="https://www.instagram.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+        </div>
+        <div slot="mobile-social-icons">
+            <biggive-social-icon service="Facebook" url="https://www.facebook.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="Twitter" url="https://www.twitter.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="LinkedIn" url="https://www.linkedin.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="YouTube" url="https://www.youtube.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+            <biggive-social-icon service="Instagram" url="https://www.instagram.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+        </div>
+        <ul class="links" slot="nav-primary">
+            <li>
+                <a href="#">Explore Campaigns</a>
+            </li>
+            <li>
+                <a href="#">Match Funding</a>
+                <biggive-misc-icon class="bx bxs-chevron-down sub-menu-arrow arrow" background-colour="white" icon-colour="black" icon="CaretRight"></biggive-misc-icon>
+
+                <ul class="sub-menu">
+                    <li>
+                        <a href="#">Match Funding Explained</a>
+                    </li>
+                    <li class="more">
+                        <span>
+                            <a href="#">Match Funding Opportunities</a>
+                            <!-- IMPORTANT: notice this one has a class sub-sub-menu, not sub-menu -->
+                            <biggive-misc-icon class="bx bxs-chevron-down sub-sub-menu-arrow arrow" background-colour="white" icon-colour="black" icon="CaretRight"></biggive-misc-icon>
+                        </span>
+                        <ul class="sub-sub-menu">
+                            <li>
+                                <a href="#" class="icon-green">
+                                Christmas Challenge
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="icon-children">
+                                Champions for Children
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="icon-green-match">
+                                Green Match Fund
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="icon-women-girls">
+                                Women & Girls Match Fund
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" class="icon-emergency">
+                                Emergency Match Fund
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="#">Run your match funding campaign</a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <a href="#">About us</a>
+                <biggive-misc-icon class="bx bxs-chevron-down sub-menu-arrow arrow" background-colour="white" icon-colour="black" icon="CaretRight"></biggive-misc-icon>
+                <ul class="sub-menu">
+                    <li>
+                        <a href="#">Our Story</a>
+                    </li>
+                    <li>
+                        <a href="#">Our People</a>
+                    </li>
+                    <li>
+                        <a href="#">Our Community</a>
+                    </li>
+                    <li>
+                        <a href="#">Our Fees</a>
+                    </li>
+                    <li>
+                        <a href="#">FAQs</a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <a href="#">For Charities</a>
+            </li>
+            <li>
+                <a href="#">For Funders</a>
+            </li>
+            <li>
+                <a href="#">Resources</a>
+                <biggive-misc-icon class="bx bxs-chevron-down sub-menu-arrow arrow" background-colour="white" icon-colour="black" icon="CaretRight"></biggive-misc-icon>
+                <ul class="sub-menu">
+                    <li>
+                        <a href="#">Case Studies</a>
+                    </li>
+                    <li>
+                        <a href="#">Webinars</a>
+                    </li>
+                    <li>
+                        <a href="#">Blog</a>
+                    </li>
+                    <li>
+                        <a href="#">Reports & Insights</a>
+                    </li>
+                    <li>
+                        <a href="#">Press</a>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+        <ul slot="nav-secondary">
+            <li><a href="#">Contact us</a></li>
+            <li><a href="#">Charity login</a></li>
+        </ul>
+    </biggive-main-menu>
+      `;
+export const MainMenu = Template.bind({});

package/dist/collection/components/biggive-misc-icon/biggive-misc-icon.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;
@@ -777,6 +781,7 @@ a:hover {
   text-align: center;
   transition: all ease-in-out 0.5s;
   display: inline-block;
+  margin-right: 10px;
 }
 .misc-icon-item.colour-scheme-primary {
   background-color: #2C089B;
@@ -851,7 +856,7 @@ a:hover {
   fill: #000000;
 }
 .misc-icon-item a {
-  display: block;
+  display: grid;
   position: relative;
   padding: 10px;
   box-sizing: border-box;
@@ -869,6 +874,7 @@ a:hover {
     text-align: center;
     transition: all ease-in-out 0.5s;
     display: inline-block;
+    margin-right: 10px;
     width: 30px;
     height: 30px;
     display: grid;
@@ -947,7 +953,7 @@ a:hover {
     fill: #000000;
   }
   .misc-icon-item a {
-    display: block;
+    display: grid;
     position: relative;
     padding: 10px;
     box-sizing: border-box;
@@ -963,4 +969,18 @@ a:hover {
   .misc-icon-item a {
     margin: auto;
   }
+}
+
+.CaretRight {
+  height: 10px;
+  width: 10px;
+  margin-right: 0px;
+}
+.CaretRight a {
+  padding: 0px;
+}
+
+.MenuClose a svg {
+  height: 12px;
+  width: 12px;
 }

package/dist/collection/components/biggive-misc-icon/biggive-misc-icon.js

@@ -12,7 +12,9 @@ export class BiggiveMiscIcon {
     return icon;
   }
   render() {
-    return (h("div", { class: 'misc-icon-item background-colour-' + this.backgroundColour }, h("a", { href: this.url }, h("svg", { width: this.getMiscIcon().icon[0], height: this.getMiscIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getMiscIcon().icon[0] + ' ' + this.getMiscIcon().icon[1] }, h("path", { d: this.getMiscIcon().icon[4].toString() })))));
+    return (
+    // Note: the icon name prop is set as a css class too for any styling specific to certain icons
+    h("div", { class: 'misc-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, h("svg", { width: this.getMiscIcon().icon[0], height: this.getMiscIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getMiscIcon().icon[0] + ' ' + this.getMiscIcon().icon[1] }, h("path", { d: this.getMiscIcon().icon[4].toString() })))));
   }
   static get is() { return "biggive-misc-icon"; }
   static get originalStyleUrls() {

package/dist/collection/components/biggive-nav-group/biggive-nav-group.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-nav-item/biggive-nav-item.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-page-column/biggive-page-column.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-page-columns/biggive-page-columns.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-page-section/biggive-page-section.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-popup/biggive-popup.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-popup-standalone/biggive-popup-standalone.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-progress-bar/biggive-progress-bar.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-quote/biggive-quote.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-search/biggive-search.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-social-icon/biggive-social-icon.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;
@@ -778,6 +782,7 @@ a:hover {
   text-align: center;
   transition: all ease-in-out 0.5s;
   display: inline-block;
+  margin-right: 10px;
 }
 .social-icon-item.colour-scheme-primary {
   background-color: #2C089B;
@@ -852,7 +857,7 @@ a:hover {
   fill: #000000;
 }
 .social-icon-item a {
-  display: block;
+  display: grid;
   position: relative;
   padding: 10px;
   box-sizing: border-box;
@@ -870,6 +875,7 @@ a:hover {
     text-align: center;
     transition: all ease-in-out 0.5s;
     display: inline-block;
+    margin-right: 10px;
     width: 30px;
     height: 30px;
   }
@@ -946,7 +952,7 @@ a:hover {
     fill: #000000;
   }
   .social-icon-item a {
-    display: block;
+    display: grid;
     position: relative;
     padding: 10px;
     box-sizing: border-box;

package/dist/collection/components/biggive-tab/biggive-tab.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-tabbed-content/biggive-tabbed-content.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-totalizer/biggive-totalizer.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-video/biggive-video.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/biggive-video-feature/biggive-video-feature.css

@@ -273,6 +273,10 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-transparent {
+  background-color: transparent;
+}
+
 .input-wrap {
   display: flex;
   justify-content: space-between;

package/dist/collection/util/fontawesome-icons.js

@@ -1,6 +1,6 @@
 import { faAccessibleIcon, faFacebookF, faTwitter, faYoutube, faInstagram, faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
-import { faBaby, faBalanceScale, faBlind, faBook, faCampground, faChild, faFutbol, faHeartbeat, faHospital, faInfoCircle, faMedal, faMicroscope, faMortarPestle, faParachuteBox, faPaw, faPeopleCarry, faPlaceOfWorship, faPlus, faRainbow, faRibbon, faSeedling, faTheaterMasks, faUniversalAccess, faUserGraduate, faVenus, } from '@fortawesome/pro-solid-svg-icons';
-import { faUsers } from '@fortawesome/pro-duotone-svg-icons';
+import { faBaby, faBalanceScale, faBars, faBlind, faBook, faCampground, faChild, faFutbol, faHeartbeat, faHospital, faInfoCircle, faMedal, faMicroscope, faMortarPestle, faParachuteBox, faPaw, faPeopleCarry, faPlaceOfWorship, faPlus, faRainbow, faRibbon, faSeedling, faTheaterMasks, faUniversalAccess, faUserGraduate, faVenus, faX, } from '@fortawesome/pro-solid-svg-icons';
+import { faUsers, faCaretRight } from '@fortawesome/pro-duotone-svg-icons';
 import { faHeadSideMedical, faHomeHeart, faHeart, faAlarmClock } from '@fortawesome/pro-solid-svg-icons';
 import { faTimer } from '@fortawesome/pro-regular-svg-icons';
 export class FontAwesomeIconsService {
@@ -90,6 +90,18 @@ export class FontAwesomeIconsService {
         name: 'Timer',
         icon: faTimer,
       },
+      {
+        name: 'CaretRight',
+        icon: faCaretRight,
+      },
+      {
+        name: 'MenuOpen',
+        icon: faBars,
+      },
+      {
+        name: 'MenuClose',
+        icon: faX,
+      },
     ];
   }
   static getCategories() {

package/dist/components/biggive-article-card.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './biggive-button2.js';
 
-const biggiveArticleCardCss = "body{background-color:#FFFFFF}body.background-primary{background-color:#2C089B}body.background-secondary{background-color:#2C089B}body.background-tertiary{background-color:#2C089B}body.background-brand-1{background-color:#B30510}body.background-brand-2{background-color:#B30510}body.background-brand-3{background-color:#B30510}body.background-brand-4{background-color:#B30510}body.background-brand-5{background-color:#B30510}body.background-brand-6{background-color:#B30510}h1,h3,h4,h5,h6{margin-bottom:0}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.colour-primary{color:#2C089B}.colour-secondary{color:#2AF135}.colour-tertiary{color:#FF7272}.colour-brand-1{color:#B30510}.colour-brand-2{color:#6E0887}.colour-brand-3{color:#50B400}.colour-brand-4{color:#FFE500}.colour-brand-5{color:#F07D00}.colour-brand-6{color:#CBC8C8}.colour-white{color:#FFFFFF}.colour-black{color:#000000}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-red{fill:red}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.input-wrap{display:flex;justify-content:space-between}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#000000;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF;border-color:#000000}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-brand-1{color:#FFFFFF;background-color:#B30510;border-color:#B30510}.button-brand-1:hover{background-color:#FFFFFF}.button-brand-2{color:#FFFFFF;background-color:#6E0887;border-color:#6E0887}.button-brand-2:hover{background-color:#FFFFFF}.button-brand-3{color:#FFFFFF;background-color:#50B400;border-color:#50B400}.button-brand-3:hover{background-color:#FFFFFF}.button-brand-4{color:#FFFFFF;background-color:#FFE500;border-color:#FFE500}.button-brand-4:hover{background-color:#000000}.button-brand-5{color:#FFFFFF;background-color:#F07D00;border-color:#F07D00}.button-brand-5:hover{background-color:#FFFFFF}.button-brand-6{color:#FFFFFF;background-color:#CBC8C8;border-color:#CBC8C8}.button-brand-6:hover{background-color:#000000}.button-white{color:#2C089B;background-color:#FFFFFF;border-color:#FFFFFF}.button-white:hover{color:#FFFFFF;background-color:#2C089B}.button-black{color:#FFFFFF;background-color:#000000;border-color:#000000}.button-black:hover{color:#000000;background-color:#FFFFFF}.button-clear-primary{color:#2C089B;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-brand-1{color:#B30510;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-1:hover{text-decoration:none;background-color:transparent}.button-clear-brand-2{color:#6E0887;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-2:hover{text-decoration:none;background-color:transparent}.button-clear-brand-3{color:#50B400;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-3:hover{text-decoration:none;background-color:transparent}.button-clear-brand-4{color:#FFE500;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-4:hover{text-decoration:none;background-color:transparent}.button-clear-brand-5{color:#F07D00;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-5:hover{text-decoration:none;background-color:transparent}.button-clear-brand-6{color:#CBC8C8;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-6:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.progress-bar{display:flex}.progress-bar .slider{margin:auto 15px auto 0;position:relative;flex-grow:1}.progress-bar .slider:before{content:\"\";position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:#E8E8E8;border-radius:4px}.progress-bar .slider .progress{position:relative;border-radius:4px;background-color:#000000;height:8px}.progress-bar .counter{font-weight:700;color:#000000;font-size:14px;line-height:18px}.progress-bar-primary .slider .progress{background-color:#2C089B}.progress-bar-primary .counter{color:#2C089B}.progress-bar-secondary .slider .progress{background-color:#2AF135}.progress-bar-secondary .counter{color:#2AF135}.video-wrap{position:relative;padding-bottom:56.25%}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.image-wrap img{width:100%;height:auto}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left;padding:30px}.container .sleeve{padding:30px 30px 0 30px;clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .slug{margin-bottom:5px}.container .date{font-size:13px;line-height:17px;margin-bottom:15px}.container h3{font-size:20px;line-height:24px;font-weight:bold;margin-bottom:15px}.container h3 a,.container h3 a:hover{text-decoration:none}.container .image-group{margin-bottom:15px}.container .image-group .image-wrap{border-radius:50%;width:60px;height:60px;background-size:cover;background-position:center center;margin-bottom:5px}.container .image-group .image-wrap img{display:none}.container .image-group .image-label{font-size:13px;line-height:17px}";
+const biggiveArticleCardCss = "body{background-color:#FFFFFF}body.background-primary{background-color:#2C089B}body.background-secondary{background-color:#2C089B}body.background-tertiary{background-color:#2C089B}body.background-brand-1{background-color:#B30510}body.background-brand-2{background-color:#B30510}body.background-brand-3{background-color:#B30510}body.background-brand-4{background-color:#B30510}body.background-brand-5{background-color:#B30510}body.background-brand-6{background-color:#B30510}h1,h3,h4,h5,h6{margin-bottom:0}h1,.heading-1{font-size:47px;line-height:60px;font-weight:bold}h2,.heading-2{font-size:38px;line-height:45px;font-weight:bold}h3,.heading-3{font-size:25px;line-height:32px;font-weight:bold}h4,.heading-4{font-size:20px;line-height:24px;font-weight:bold}h5,.heading-5{font-size:17px;line-height:24px;font-weight:bold}a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.colour-primary{color:#2C089B}.colour-secondary{color:#2AF135}.colour-tertiary{color:#FF7272}.colour-brand-1{color:#B30510}.colour-brand-2{color:#6E0887}.colour-brand-3{color:#50B400}.colour-brand-4{color:#FFE500}.colour-brand-5{color:#F07D00}.colour-brand-6{color:#CBC8C8}.colour-white{color:#FFFFFF}.colour-black{color:#000000}.text-colour-hover-primary:hover,.text-colour-primary{color:#2C089B}.text-colour-hover-secondary:hover,.text-colour-secondary{color:#2AF135}.text-colour-hover-tertiary:hover,.text-colour-tertiary{color:#FF7272}.text-colour-hover-brand-1:hover,.text-colour-brand-1{color:#B30510}.text-colour-hover-brand-2:hover,.text-colour-brand-2{color:#6E0887}.text-colour-hover-brand-3:hover,.text-colour-brand-3{color:#50B400}.text-colour-hover-brand-4:hover,.text-colour-brand-4{color:#FFE500}.text-colour-hover-brand-5:hover,.text-colour-brand-5{color:#F07D00}.text-colour-hover-brand-6:hover,.text-colour-brand-6{color:#CBC8C8}.text-colour-hover-white:hover,.text-colour-white{color:#FFFFFF}.text-colour-hover-black:hover,.text-colour-black{color:#000000}.fill-primary{fill:#2C089B}.fill-secondary{fill:#2AF135}.fill-tertiary{fill:#FF7272}.fill-brand-1{fill:#B30510}.fill-brand-2{fill:#6E0887}.fill-brand-3{fill:#50B400}.fill-brand-4{fill:#FFE500}.fill-brand-5{fill:#F07D00}.fill-brand-6{fill:#CBC8C8}.fill-white{fill:#FFFFFF}.fill-black{fill:#000000}.fill-red{fill:red}.background-colour-hover-primary:hover,.background-colour-primary{background-color:#2C089B}.background-colour-hover-secondary:hover,.background-colour-secondary{background-color:#2AF135}.background-colour-hover-tertiary:hover,.background-colour-tertiary{background-color:#FF7272}.background-colour-hover-brand-1:hover,.background-colour-brand-1{background-color:#B30510}.background-colour-hover-brand-2:hover,.background-colour-brand-2{background-color:#6E0887}.background-colour-hover-brand-3:hover,.background-colour-brand-3{background-color:#50B400}.background-colour-hover-brand-4:hover,.background-colour-brand-4{background-color:#FFE500}.background-colour-hover-brand-5:hover,.background-colour-brand-5{background-color:#F07D00}.background-colour-hover-brand-6:hover,.background-colour-brand-6{background-color:#CBC8C8}.background-colour-hover-white:hover,.background-colour-white{background-color:#FFFFFF}.background-colour-hover-black:hover,.background-colour-black{background-color:#000000}.background-colour-transparent{background-color:transparent}.input-wrap{display:flex;justify-content:space-between}.input-text{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;color:#000000;padding:5px 10px;box-sizing:border-box;width:100%}.input-text:focus{outline:0}.input-text:placeholder{color:#4A4A4A}.button{font-size:17px;line-height:24px;padding:10px 30px;border-radius:5px;border:1px solid #000000;background-color:#000000;color:#FFFFFF;display:inline-block;text-decoration:none;text-align:center;transition:all ease-in-out 0.5s;cursor:pointer}.button:hover{background-color:#FFFFFF;color:#000000}.button.size-small{font-size:13px;line-height:17px;padding:5px 15px}.button.button.rounded-true{border-radius:27.5px}.button.button.rounded-true.size-small{border-radius:20px}.button-primary{color:#FFFFFF;background-color:#2C089B;border-color:#2C089B}.button-primary:hover{color:#2C089B;background-color:#FFFFFF}.button-secondary{color:#000000;background-color:#2AF135;border-color:#2AF135}.button-secondary:hover{background-color:#FFFFFF;border-color:#000000}.button-tertiary{color:#FFFFFF;background-color:#FF7272;border-color:#FF7272}.button-tertiary:hover{background-color:#FFFFFF}.button-brand-1{color:#FFFFFF;background-color:#B30510;border-color:#B30510}.button-brand-1:hover{background-color:#FFFFFF}.button-brand-2{color:#FFFFFF;background-color:#6E0887;border-color:#6E0887}.button-brand-2:hover{background-color:#FFFFFF}.button-brand-3{color:#FFFFFF;background-color:#50B400;border-color:#50B400}.button-brand-3:hover{background-color:#FFFFFF}.button-brand-4{color:#FFFFFF;background-color:#FFE500;border-color:#FFE500}.button-brand-4:hover{background-color:#000000}.button-brand-5{color:#FFFFFF;background-color:#F07D00;border-color:#F07D00}.button-brand-5:hover{background-color:#FFFFFF}.button-brand-6{color:#FFFFFF;background-color:#CBC8C8;border-color:#CBC8C8}.button-brand-6:hover{background-color:#000000}.button-white{color:#2C089B;background-color:#FFFFFF;border-color:#FFFFFF}.button-white:hover{color:#FFFFFF;background-color:#2C089B}.button-black{color:#FFFFFF;background-color:#000000;border-color:#000000}.button-black:hover{color:#000000;background-color:#FFFFFF}.button-clear-primary{color:#2C089B;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-primary:hover{text-decoration:none;background-color:transparent}.button-clear-secondary{color:#2AF135;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-secondary:hover{text-decoration:none;background-color:transparent}.button-clear-tertiary{color:#FF7272;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-tertiary:hover{text-decoration:none;background-color:transparent}.button-clear-brand-1{color:#B30510;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-1:hover{text-decoration:none;background-color:transparent}.button-clear-brand-2{color:#6E0887;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-2:hover{text-decoration:none;background-color:transparent}.button-clear-brand-3{color:#50B400;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-3:hover{text-decoration:none;background-color:transparent}.button-clear-brand-4{color:#FFE500;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-4:hover{text-decoration:none;background-color:transparent}.button-clear-brand-5{color:#F07D00;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-5:hover{text-decoration:none;background-color:transparent}.button-clear-brand-6{color:#CBC8C8;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-brand-6:hover{text-decoration:none;background-color:transparent}.button-clear-white{color:#FFFFFF;background-color:transparent;text-decoration:underline;border:0;padding-left:0;padding-right:0}.button-clear-white:hover{color:#FFFFFF;text-decoration:none;background-color:transparent}.button-rounded{border-radius:27.5px}.button-rounded.size-small{border-radius:20px}.progress-bar{display:flex}.progress-bar .slider{margin:auto 15px auto 0;position:relative;flex-grow:1}.progress-bar .slider:before{content:\"\";position:absolute;display:block;top:0;left:0;bottom:0;right:0;background-color:#E8E8E8;border-radius:4px}.progress-bar .slider .progress{position:relative;border-radius:4px;background-color:#000000;height:8px}.progress-bar .counter{font-weight:700;color:#000000;font-size:14px;line-height:18px}.progress-bar-primary .slider .progress{background-color:#2C089B}.progress-bar-primary .counter{color:#2C089B}.progress-bar-secondary .slider .progress{background-color:#2AF135}.progress-bar-secondary .counter{color:#2AF135}.video-wrap{position:relative;padding-bottom:56.25%}.video-wrap iframe,.video-wrap video{position:absolute;border:0;display:block;left:0;right:0;top:0;bottom:0;width:100%;height:100%}.image-wrap img{width:100%;height:auto}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center}.align-justify{text-align:justify}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.horizontal-padding-1{padding-left:5px;padding-right:5px}.horizontal-padding-2{padding-left:10px;padding-right:10px}.horizontal-padding-3{padding-left:15px;padding-right:15px}.horizontal-padding-4{padding-left:30px;padding-right:30px}.horizontal-padding-5{padding-left:45px;padding-right:45px}.horizontal-padding-6{padding-left:60px;padding-right:60px}.vertical-padding-1{padding-top:5px;padding-bottom:5px}.vertical-padding-2{padding-top:10px;padding-bottom:10px}.vertical-padding-3{padding-top:15px;padding-bottom:15px}.vertical-padding-4{padding-top:30px;padding-bottom:30px}.vertical-padding-5{padding-top:45px;padding-bottom:45px}.vertical-padding-6{padding-top:60px;padding-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left;padding:30px}.container .sleeve{padding:30px 30px 0 30px;clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px))}.container .slug{margin-bottom:5px}.container .date{font-size:13px;line-height:17px;margin-bottom:15px}.container h3{font-size:20px;line-height:24px;font-weight:bold;margin-bottom:15px}.container h3 a,.container h3 a:hover{text-decoration:none}.container .image-group{margin-bottom:15px}.container .image-group .image-wrap{border-radius:50%;width:60px;height:60px;background-size:cover;background-position:center center;margin-bottom:5px}.container .image-group .image-wrap img{display:none}.container .image-group .image-label{font-size:13px;line-height:17px}";
 
 const BiggiveArticleCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {