@ptcwebops/ptcw-design 6.3.35-beta → 6.3.35

package/dist/collection/stories/organisms/ptc/Event Jumbotron/preview.stories.js

@@ -0,0 +1,470 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Event Jumbotron'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="event-jumbotron-wrapper">
+        <div class="ptc-container">
+            <div class="is-grid has-no-row-gap">
+                <div class="is-col-12-xs">
+                    <h1 class="event-h1">
+                        PTC Events
+                    </h1>
+                </div>
+                <div class="is-col-12-xs u-section-heading-wrapper">
+                    <ptc-breadcrumb slot="breadcrumb" color="white" position="center" remove-top-margin>
+                        <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us"
+                            color="primary-gray">
+                            PTC Events
+                        </list-item>
+                    </ptc-breadcrumb>
+                    <h2 class="event-h2">
+                        Lorem Ipsum Dolor
+                    </h2>
+                    
+                    
+                    
+                    <h3 class="event-summary-h3">Consectetur adipiscing elit nunc et dolor arcu</h3>
+                    <ptc-para font-size="small" font-weight="w-4" para-align="center" para-color="white"
+                        para-line-h="line-height-p" para-margin="margin-top-4" para-z-index="z-1"
+                        seo-compatibility-mode>Aliquam erat volutpat. Integer ac placerat massa. Nunc aliquam libero in
+                        aliquam
+                        vestibulum. Ut pellentesque est eget ex viverra efficitur. Vivamus in pellentesque purus.
+                    </ptc-para>
+                    <div class="cta-group is-centered">
+                        <ptc-button tracker-id="all-events" class="cta-all" color="ptc-quaternary" disabled="false"
+                            link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self"
+                            text-align="undefined" type="button">See All Events
+                        </ptc-button>
+                        <ptc-button tracker-id="world-tour-events" class="cta-tour" color="ptc-secondary"
+                            disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined"
+                            tab-nav="0" target="_self" text-align="undefined" type="button">See World Tour Events
+                        </ptc-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <event-jumbotron-example>
+            
+            <div slot="panel-content-0" class="desktop-panel">
+                
+                <div class="expanding-card-description"> 
+                    <ul>
+                        <li>Item one</li>
+                        <li>Item two</li>
+                    </ul>
+                    <p>Aliquam erat volutpat. Integer ac placeratmassa. Nunc aliquam</p>
+                    <p>This is some text inside a paragraph.</p>
+                    <p>Here is a <a href="#">link</a> inside another paragraph.</p>
+                    <p>Some more text that might not fit.</p>
+                </div>
+                <div class="scroll-items-wrapper">
+                    
+                    <ptc-scroll-button direction="left" scroll-container-class="panel-cards-group"
+                        scrollAmount="150"></ptc-scroll-button>
+                    <div class="is-grid has-col-gap-md has-row-gap-md panel-cards-group">
+                        
+                        <ptc-card-wrapper id="panel-sub-card-1" tabindex="0" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-4 panel-sub-card"
+                            styles=":host{padding:var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;}:host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1" card-type="event-jumbotron-sub-card">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul">
+                                    <li><icon-asset name="calender-small" size="medium" color="default"
+                                            type="ptc"></icon-asset>October 29, 2024</li>
+                                    <li><icon-asset name="user-group" size="medium" color="default"
+                                            type="ptc"></icon-asset>In Person</li>
+                                    <li><icon-asset name="chat" size="medium" color="default"
+                                            type="ptc"></icon-asset>English</li>
+                                </ul>
+                                <p class="sub-card-description u-marginBottom-flush">
+                                    PTC is a panelist speaker at the eVTOL Show. A wonderful serenity has taken
+                                    possession of my entire soul, like these sweet mornings of spring which I enjoy with
+                                    my whole heart. I am alone, and feel the charm of existence in this spot, which was
+                                    created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed
+                                    in the exquisit
+                                </p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                        <ptc-card-wrapper id="panel-sub-card-2" tabindex="0" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-4 panel-sub-card"
+                            styles=":host{padding:var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;}:host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul">
+                                    <li>October 29, 2024</li>
+                                    <li>In Person</li>
+                                    <li>English</li>
+                                </ul>
+                                <p class="sub-card-description u-marginBottom-flush">Register for the FlexPLM West Coast
+                                    Customer Forum taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                        <ptc-card-wrapper id="panel-sub-card-3" tabindex="0" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-4 panel-sub-card"
+                            styles=":host{padding:var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02); border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;} :host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul">
+                                    <li>October 29, 2024</li>
+                                    <li>In Person</li>
+                                    <li>English</li>
+                                </ul>
+                                <p class="sub-card-description u-marginBottom-flush">Register for the FlexPLM West Coast
+                                    Customer Forum taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                    </div>
+                    <ptc-scroll-button direction="right" scroll-container-class="panel-cards-group"
+                        scrollAmount="150"></ptc-scroll-button>
+                    
+                </div>
+                <div class="u-textAlign-ctr">
+                    <ptc-spacer direction="vertical" size="large"></ptc-spacer>
+                    <ptc-spacer direction="vertical" size="large"></ptc-spacer>
+                    <ptc-link font-size="medium-large" font-weight="undefined" href="https://www.ptc.com"
+                        link-area="undefined" link-title="All Industries Exchanges" target="_blank" theme="simple">All
+                        Industries Exchanges</ptc-link>
+                </div>
+            </div>
+            <div slot="panel-content-1" class="desktop-panel">
+                <p class="expanding-card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+                    doloremque totam cupiditate libero maxime numquam ducimus deleniti excepturi vero, aliquam nemo,
+                    exercitationem nam adipisci, eos saepe quia sed beatae provident!</p>
+                <ptc-card-wrapper id="event-sub-card-id"
+                    is-loading="false" link-target="_blank" link-title="card-item-title"
+                    class="mf-listen is-col-12 is-col-4-md no-content-card"
+                    styles=":host{padding:var(--ptc-element-spacing-08); box-shadow:none; border: 1px solid var(--color-gray-02); text-align:center;border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;}:host a:hover{text-decoration:none;}">
+                    <ptc-card-content tabindex="-1" card-type="event-jumbotron-sub-card">
+                        <h3 class="u-marginTop-flush subcard-blank-title">More coming soon
+                        </h3>
+                        <p class="sub-card-description u-marginBottom-xxl">There are no <span>'Industry Exchange'</span>
+                            events upcoming at this time.</p>
+                        <ptc-button tracker-id="all-events" class="cta-all" color="ptc-quaternary" disabled="false"
+                            link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self"
+                            text-align="undefined" type="button">See All Events
+                        </ptc-button>
+                    </ptc-card-content>
+                </ptc-card-wrapper>
+            </div>
+            <div slot="panel-content-2" class="desktop-panel">
+                <p class="expanding-card-description">Aliquam erat volutpat. Integer ac placerat massa. Nunc aliquam
+                    libero in aliquam vestibulum. Ut
+                    pellentesque est eget ex viverra efficitur. Aliquam erat volutpat. Integer ac placerat massa. Nunc
+                    aliquam libero in aliquam vestibulum. Ut pellentesque est eget ex viverra efficitur.</p>
+                <div class="scroll-items-wrapper">
+                    
+                    <ptc-scroll-button direction="left" scroll-container-class="panel-cards-group"
+                        scrollAmount="150"></ptc-scroll-button>
+                    <div class="is-grid has-col-gap-md has-row-gap-md panel-cards-group">
+                        <ptc-card-wrapper id="panel-sub-card-1" tabindex="0" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-6 panel-sub-card"
+                            styles=":host{padding:var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;}:host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1" card-type="event-jumbotron-sub-card">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul">
+                                    <li><icon-asset name="calender-small" size="medium" color="default"
+                                            type="ptc"></icon-asset>October 29, 2024</li>
+                                    <li><icon-asset name="user-group" size="medium" color="default"
+                                            type="ptc"></icon-asset>In Person</li>
+                                    <li><icon-asset name="chat" size="medium" color="default"
+                                            type="ptc"></icon-asset>English</li>
+                                </ul>
+                                <p class="sub-card-description u-marginBottom-flush">Register for the FlexPLM West Coast
+                                    Customer Forum taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                        <ptc-card-wrapper id="panel-sub-card-2" tabindex="0" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-6 panel-sub-card"
+                            styles=":host{padding:var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;}:host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul">
+                                    <li>October 29, 2024</li>
+                                    <li>In Person</li>
+                                    <li>English</li>
+                                </ul>
+                                <p class="sub-card-description u-marginBottom-flush">Register for the FlexPLM West Coast
+                                    Customer Forum taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                    </div>
+                    <ptc-scroll-button direction="right" scroll-container-class="panel-cards-group"
+                        scrollAmount="150"></ptc-scroll-button>
+                    
+                </div>
+                <div class="u-textAlign-ctr">
+                    <ptc-spacer direction="vertical" size="large"></ptc-spacer>
+                    <ptc-spacer direction="vertical" size="large"></ptc-spacer>
+                    <ptc-link font-size="medium-large" font-weight="undefined" href="https://www.ptc.com"
+                        link-area="undefined" link-title="All Industries Exchanges" target="_blank" theme="simple">All
+                        Industries Exchanges</ptc-link>
+                </div>
+            </div>
+            <div slot="panel-content-3" class="desktop-panel">
+                <p class="expanding-card-description">Aliquam erat volutpat. Integer ac placerat massa. Nunc aliquam
+                    libero in aliquam vestibulum. Ut
+                    pellentesque est eget ex viverra efficitur. Aliquam erat volutpat. Integer ac placerat massa. Nunc
+                    aliquam libero in aliquam vestibulum. Ut pellentesque est eget ex viverra efficitur.</p>
+                <div class="scroll-items-wrapper">
+                    
+                    <ptc-scroll-button direction="left" scroll-container-class="panel-cards-group"
+                        scrollAmount="150"></ptc-scroll-button>
+                    <div class="is-grid has-col-gap-md has-row-gap-md panel-cards-group">
+                        <ptc-card-wrapper id="panel-sub-card-1" tabindex="0" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-12 panel-sub-card"
+                            styles=":host{padding:var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;}:host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1" card-type="event-jumbotron-sub-card">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul">
+                                    <li><icon-asset name="calender-small" size="medium" color="default"
+                                            type="ptc"></icon-asset>October 29, 2024</li>
+                                    <li><icon-asset name="user-group" size="medium" color="default"
+                                            type="ptc"></icon-asset>In Person</li>
+                                    <li><icon-asset name="chat" size="medium" color="default"
+                                            type="ptc"></icon-asset>English</li>
+                                </ul>
+                                <p class="sub-card-description u-marginBottom-flush">Register for the FlexPLM West Coast
+                                    Customer Forum taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                    </div>
+                    <ptc-scroll-button direction="right" scroll-container-class="panel-cards-group"
+                        scrollAmount="150"></ptc-scroll-button>
+                    
+                </div>
+                <div class="u-textAlign-ctr">
+                    <ptc-spacer direction="vertical" size="large"></ptc-spacer>
+                    <ptc-spacer direction="vertical" size="large"></ptc-spacer>
+                    <ptc-link font-size="medium-large" font-weight="undefined" href="https://www.ptc.com"
+                        link-area="undefined" link-title="All Industries Exchanges" target="_blank" theme="simple">All
+                        Industries Exchanges</ptc-link>
+                </div>
+            </div>
+
+            
+            <template class="mobile-modal">
+                
+                <div 
+                    class="u-flex is-flex-column u-marginLeft-xxl u-marginRight-xxl u-marginBottom-xxl mobile-card-div">
+                    <p class="expanding-card-description">
+                        Modal 1 Aliquam erat volutpat. Integer ac placerat massa. Nunc aliquam libero in aliquam
+                        vestibulum.
+                        Ut pellentesque est eget ex viverra efficitur. Aliquam erat
+                        volutpat. Integer ac placerat massa. Nunc aliquam libero in aliquam vestibulum. Ut pellentesque
+                        est
+                        eget ex viverra efficitur.
+                    </p>
+                    <div class="is-grid has-col-gap-md has-row-gap-md grid-demo-style">
+                        
+                        <ptc-card-wrapper id="most-popular-1" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-12 is-col-4-md"
+                            styles=":host{padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-05) var(--ptc-element-spacing-05) var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02); border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;} :host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1" card-type="event-jumbotron-sub-card">
+                                
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul mobile-ul">
+                                    <li><icon-asset name="calender-small" size="medium" color="default"
+                                            type="ptc"></icon-asset>October 29, 2024</li>
+                                    <li><icon-asset name="user-group" size="medium" color="default"
+                                            type="ptc"></icon-asset>In Person</li>
+                                    <li><icon-asset name="chat" size="medium" color="default"
+                                            type="ptc"></icon-asset>English</li>
+                                </ul>
+                                <p class="u-marginBottom-flush mobile-card-content-p">Register for the FlexPLM West
+                                    Coast Customer Forum
+                                    taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                        <ptc-card-wrapper id="most-popular-1" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-12 is-col-4-md"
+                            styles=":host{padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-05) var(--ptc-element-spacing-05) var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02); border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;} :host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul mobile-ul">
+                                    <li><icon-asset name="calender-small" size="medium" color="default"
+                                            type="ptc"></icon-asset>October 29, 2024</li>
+                                    <li><icon-asset name="user-group" size="medium" color="default"
+                                            type="ptc"></icon-asset>In Person</li>
+                                    <li><icon-asset name="chat" size="medium" color="default"
+                                            type="ptc"></icon-asset>English</li>
+                                </ul>
+                                
+                                <p class="u-marginBottom-flush mobile-card-content-p">Register for the FlexPLM West
+                                    Coast Customer Forum
+                                    taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                        <ptc-card-wrapper id="most-popular-1" card-link="https://www.ptc.com/"
+                            is-loading="false" link-target="_blank" link-title="card-item-title"
+                            class="mf-listen is-col-12 is-col-4-md"
+                            styles=":host{padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-05) var(--ptc-element-spacing-05) var(--ptc-element-spacing-05); box-shadow:none; border: 1px solid var(--color-gray-02); border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;} :host a:hover{text-decoration:none;}">
+                            <ptc-card-content tabindex="-1">
+                                <h3 class="u-marginTop-flush sub-card-title">FlexPLM West Coast Customer Forum</h3>
+                                <ul class="sub-card-ul mobile-ul">
+                                    <li><icon-asset name="calender-small" size="medium" color="default"
+                                            type="ptc"></icon-asset>October 29, 2024</li>
+                                    <li><icon-asset name="user-group" size="medium" color="default"
+                                            type="ptc"></icon-asset>In Person</li>
+                                    <li><icon-asset name="chat" size="medium" color="default"
+                                            type="ptc"></icon-asset>English</li>
+                                </ul>
+                                <p class="u-marginBottom-flush mobile-card-content-p">Register for the FlexPLM West
+                                    Coast Customer Forum
+                                    taking
+                                    place in October.</p>
+                            </ptc-card-content>
+                        </ptc-card-wrapper>
+                    </div>
+                    <div class="u-textAlign-ctr">
+                        <ptc-spacer breakpoint="large" size="x-small"></ptc-spacer>
+                        <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+                        <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                        <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+                        <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+                        <ptc-link font-size="medium-large" font-weight="undefined" href="https://www.ptc.com"
+                            link-area="undefined" link-title="All Industries Exchanges" target="_blank" theme="simple">
+                            All Industries Exchanges
+                        </ptc-link>
+                    </div>
+                </div>
+            </template>
+            <template class="mobile-modal">
+                <div 
+                    class="u-flex is-flex-column u-marginLeft-xxl u-marginRight-xxl u-marginBottom-xxl mobile-card-div">
+                    <p class="expanding-card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+                        doloremque totam cupiditate libero maxime numquam ducimus deleniti excepturi vero, aliquam nemo,
+                        exercitationem nam adipisci, eos saepe quia sed beatae provident!</p>
+                    <ptc-card-wrapper id="event-sub-card-id"
+                        is-loading="false" link-target="_blank" link-title="card-item-title"
+                        class="more-come-soon mf-listen is-col-12 is-col-4-md"
+                        styles=":host{padding:var(--ptc-element-spacing-08); box-shadow:none; border: 1px solid var(--color-gray-02); border-radius:var(--ptc-border-radius-standard);}:host a{ text-decoration: none;} :host a:hover{text-decoration:none;}">
+                        <ptc-card-content card-type="event-jumbotron-sub-card">
+                            <h3 class="u-marginTop-flush subcard-blank-title">More coming soon
+                            </h3>
+                            <p class="sub-card-description u-marginBottom-xxl">There are no <span>'Industry
+                                    Exchange'</span>
+                                events upcoming at this time.</p>
+                            <ptc-button tracker-id="all-events" class="cta-all" color="ptc-quaternary" disabled="false"
+                                link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0"
+                                target="_self" text-align="undefined" type="button">See All Events
+                            </ptc-button>
+                        </ptc-card-content>
+                    </ptc-card-wrapper>
+                </div>
+            </template>
+            <template class="mobile-modal">
+                <div 
+                    class="u-flex is-flex-column u-marginLeft-xxl u-marginRight-xxl u-marginBottom-xxl mobile-card-div">
+                    <p class="expanding-card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+                        doloremque totam cupiditate libero maxime numquam ducimus deleniti excepturi vero, aliquam nemo,
+                        exercitationem nam adipisci, eos saepe quia sed beatae provident!</p>
+                    <ptc-card-wrapper id="event-sub-card-id" card-type="simple-card"
+                        is-loading="false" link-target="_blank"
+                        link-title="card-item-title" class="more-come-soon mf-listen is-col-12 is-col-4-md"
+                        styles=":host(.simple-card){padding:var(--ptc-element-spacing-08); box-shadow:none; border: 1px solid var(--color-gray-02); text-align:center;}">
+                        <ptc-card-content card-type="event-jumbotron-sub-card">
+                            <h3 class="u-marginTop-flush subcard-blank-title">More coming soon
+                            </h3>
+                            <p class="sub-card-description u-marginBottom-xxl">There are no <span>'Industry
+                                    Exchange'</span>
+                                events upcoming at this time.</p>
+                            <ptc-button tracker-id="all-events" class="cta-all" color="ptc-quaternary" disabled="false"
+                                link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0"
+                                target="_self" text-align="undefined" type="button">See All Events
+                            </ptc-button>
+                        </ptc-card-content>
+                    </ptc-card-wrapper>
+                </div>
+            </template>
+            <template class="mobile-modal">
+                <div 
+                    class="u-flex is-flex-column u-marginLeft-xxl u-marginRight-xxl u-marginBottom-xxl mobile-card-div">
+                    <p class="expanding-card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
+                        doloremque totam cupiditate libero maxime numquam ducimus deleniti excepturi vero, aliquam nemo,
+                        exercitationem nam adipisci, eos saepe quia sed beatae provident!</p>
+                    <ptc-card-wrapper id="event-sub-card-id" card-type="simple-card"
+                        is-loading="false" link-target="_blank"
+                        link-title="card-item-title" class="more-come-soon mf-listen is-col-12 is-col-4-md"
+                        styles=":host(.simple-card){padding:var(--ptc-element-spacing-08); box-shadow:none; border: 1px solid var(--color-gray-02); text-align:center;}">
+                        <ptc-card-content card-type="event-jumbotron-sub-card">
+                            <h3 class="u-marginTop-flush subcard-blank-title">More coming soon
+                            </h3>
+                            <p class="sub-card-description u-marginBottom-xxl">There are no <span>'Industry
+                                    Exchange'</span>
+                                events upcoming at this time.</p>
+                            <ptc-button tracker-id="all-events" class="cta-all" color="ptc-quaternary" disabled="false"
+                                link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0"
+                                target="_self" text-align="undefined" type="button">See All Events
+                            </ptc-button>
+                        </ptc-card-content>
+                    </ptc-card-wrapper>
+                </div>
+            </template>
+        </event-jumbotron-example>
+    </div>
+
+    <div class="ptc-section-standard">
+        <div class="ptc-container">
+            <ptc-title type="h2" text-align="left" title-size="x-large" title-color="gray" upperline="no-upperline"
+                title-display="inline-block" title-shadow="" title-height="densest" title-margin="margin-flush"
+                title-weight="w-8" is-plm-hub="false">
+                Featured Content
+            </ptc-title>
+            
+        </div>
+    </div>
+<script>
+    const jumbotron = document.querySelector('event-jumbotron-example');
+    // New cards object update
+    jumbotron.cards = [
+        {
+            title: 'Executive',
+            description: 'Exchange',
+            panelContent: '<ptc-link disabled="true" font-size="medium-large" href="" link-title="Title attribute goes here" theme="d-green-underline" tab-nav="-1">Explore Events</ptc-link>',
+            cardBg: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/de0c1c5a2d794312970c51d30ac3d33d?v=fbe0b15d',
+        },
+        {
+            title: 'Industry',
+            description: 'Exchange',
+            panelContent: '<ptc-link disabled="true" font-size="medium-large" href="" link-title="Title attribute goes here" theme="d-green-underline" tab-nav="-1">Explore Events</ptc-link>',
+            cardBg: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/ceeee93be3d1409eb13998e651649444?v=d92b8fcd',
+        },
+        {
+            title: 'Innovation',
+            description: 'Exchange',
+            panelContent: '<ptc-link disabled="true" font-size="medium-large" href="" link-title="Title attribute goes here" theme="d-green-underline" tab-nav="-1">Explore Events</ptc-link>',
+            cardBg: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/2e6f7b6f348f42c9b6baf22c67d728c4?v=f0b6292e',
+        },
+        {
+            title: 'Community',
+            description: 'Exchange',
+            panelContent: '<ptc-link disabled="true" font-size="medium-large" href="" link-title="Title attribute goes here" theme="d-green-underline" tab-nav="-1">Explore Events</ptc-link>',
+            cardBg: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5997b6c3a336496e8bbeb48866b1e546?v=702e0697',
+        },
+    ];
+</script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Event Podcast Slider/preview.stories.js

@@ -0,0 +1,142 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Event Podcast Slider'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        /* ptc-picture{
+            width: 260px;
+            height: 260px;
+        } */
+    </style>
+<div class="ptc-section-standard">
+        <div class="ptc-container">
+            <div class="event-podcast-slider-wrapper">
+                <h2 class="event-podcast-title">
+                    Ongoing series
+                </h2>
+                <max-width-container breakpoint="992" content-align="left" max-width="768">
+                    <p class="event-podcast-description">
+                        Aliquam erat volutpat. Integer ac placerat massa. Nunc aliquam libero in aliquam vestibulum. Ut
+                        pellentesque est eget ex viverra efficitur. Vivamus in pellentesque purus.
+                    </p>
+                </max-width-container>
+                
+                <div class="cards-wrapper">
+                    <div class="swiper-homepage-cs swiper-slider-container">
+                        <event-podcast-slider-example id="test-id">
+                            <div class="swiper-slide">
+                                
+                                <ptc-card-wrapper tracker-id="event-podcast-card-id" card-type="event-podcast"
+                                    card-link="https://www.ptc.com/" is-loading="false" link-target="_blank"
+                                    hide-link-title class="mf-listen is-col-12 is-col-4-md"
+                                    styles=":host{text-align:center; border-radius: var(--ptc-border-radius-standard);}">
+                                    <ptc-card-content tabindex="-1" card-type="event-podcast">
+                                        <ptc-picture alt="image-test" object-fit="cover"
+                                            styles=":host{border-radius: 4px 4px 0px 0px;}"
+                                            src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/de0c1c5a2d794312970c51d30ac3d33d?v=fbe0b15d">
+                                        </ptc-picture>
+                                    </ptc-card-content>
+                                    <ptc-card-bottom card-type="event-podcast"
+                                        styles=":host{border-radius: 0px 0px 4px 4px;background-color:var(--color-white);padding: 20px 20px 24px 20px;}">
+                                        <ptc-link  styles="a{line-height:26px!important;}" font-size="medium-large" link-title="ptc" tab-nav="-1" disabled>Listen Now</ptc-link>
+                                    </ptc-card-bottom>
+                                </ptc-card-wrapper>
+                            </div>
+                            <div class="swiper-slide">
+                                
+                                <ptc-card-wrapper tracker-id="event-podcast-card-id" card-type="event-podcast"
+                                    card-link="https://www.ptc.com/" is-loading="false" link-target="_blank"
+                                    hide-link-title class="mf-listen is-col-12 is-col-4-md"
+                                    styles=":host{text-align:center; border-radius: var(--ptc-border-radius-standard);}">
+                                    <ptc-card-content tabindex="-1" card-type="event-podcast">
+                                        <ptc-picture alt="image-test" object-fit="cover"
+                                            styles=":host{border-radius: 4px 4px 0px 0px;}"
+                                            src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/de0c1c5a2d794312970c51d30ac3d33d?v=fbe0b15d">
+                                        </ptc-picture>
+                                    </ptc-card-content>
+                                    <ptc-card-bottom card-type="event-podcast"
+                                        styles=":host{border-radius: 0px 0px 4px 4px;background-color:var(--color-white);padding: 20px 20px 24px 20px;}">
+                                        <ptc-link  styles="a{line-height:26px!important;}" font-size="medium-large" link-title="ptc" tab-nav="-1" disabled>Listen Now</ptc-link>
+                                    </ptc-card-bottom>
+                                </ptc-card-wrapper>
+                            </div>
+                            <div class="swiper-slide">
+                                
+                                <ptc-card-wrapper tracker-id="event-podcast-card-id" card-type="event-podcast"
+                                    card-link="https://www.ptc.com/" is-loading="false" link-target="_blank"
+                                    hide-link-title class="mf-listen is-col-12 is-col-4-md"
+                                    styles=":host{text-align:center; border-radius: var(--ptc-border-radius-standard);}">
+                                    <ptc-card-content tabindex="-1" card-type="event-podcast">
+                                        <ptc-picture alt="image-test" object-fit="cover"
+                                            styles=":host{border-radius: 4px 4px 0px 0px;}"
+                                            src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/de0c1c5a2d794312970c51d30ac3d33d?v=fbe0b15d">
+                                        </ptc-picture>
+                                    </ptc-card-content>
+                                    <ptc-card-bottom card-type="event-podcast"
+                                        styles=":host{border-radius: 0px 0px 4px 4px;background-color:var(--color-white);padding: 20px 20px 24px 20px;}">
+                                        <ptc-link  styles="a{line-height:26px!important;}" font-size="medium-large" link-title="ptc" tab-nav="-1" disabled>Listen Now</ptc-link>
+                                    </ptc-card-bottom>
+                                </ptc-card-wrapper>
+                            </div>
+                            
+                            <div class="swiper-slide">
+                                <ptc-card-wrapper id="event-podcast-card-id" card-type="event-podcast"
+                                    card-link="https://www.ptc.com/" is-loading="false" link-target="_blank"
+                                    hide-link-title class="mf-listen is-col-12 is-col-4-md"
+                                    styles=":host{text-align:center; border-radius: var(--ptc-border-radius-standard);}">
+                                    <ptc-card-content tabindex="-1" card-type="event-podcast">
+                                        <ptc-picture alt="image-test" object-fit="cover"
+                                            styles=":host{border-radius: 4px 4px 0px 0px;}"
+                                            src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/de0c1c5a2d794312970c51d30ac3d33d?v=fbe0b15d">
+                                        </ptc-picture>
+                                    </ptc-card-content>
+                                    <ptc-card-bottom card-type="event-podcast"
+                                        styles=":host{border-radius: 0px 0px 4px 4px;background-color:var(--color-white);padding: 20px 20px 24px 20px;}">
+                                        <ptc-link  styles="a{line-height:26px!important;}" font-size="medium-large" link-title="ptc" tab-nav="-1" disabled>Listen Now</ptc-link>
+                                    </ptc-card-bottom>
+                                </ptc-card-wrapper>
+                            </div>
+                            <div class="swiper-slide">
+                                <ptc-card-wrapper id="event-podcast-card-id" card-type="event-podcast"
+                                    card-link="https://www.ptc.com/" is-loading="false" link-target="_blank"
+                                    hide-link-title class="mf-listen is-col-12 is-col-4-md"
+                                    styles=":host{text-align:center; border-radius: var(--ptc-border-radius-standard);}">
+                                    <ptc-card-content tabindex="-1" card-type="event-podcast">
+                                        <ptc-picture alt="image-test" object-fit="cover"
+                                            styles=":host{border-radius: 4px 4px 0px 0px;}"
+                                            src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/de0c1c5a2d794312970c51d30ac3d33d?v=fbe0b15d">
+                                        </ptc-picture>
+                                    </ptc-card-content>
+                                    <ptc-card-bottom card-type="event-podcast"
+                                        styles=":host{border-radius: 0px 0px 4px 4px;background-color:var(--color-white);padding: 20px 20px 24px 20px;}">
+                                        <ptc-link styles="a{line-height:26px!important;}" font-size="medium-large" link-title="ptc" tab-nav="-1" disabled>Listen Now</ptc-link>
+                                    </ptc-card-bottom>
+                                </ptc-card-wrapper>
+                            </div>
+                            
+                        </event-podcast-slider-example>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="ptc-section-standard">
+        <div class="ptc-container">
+            <ptc-title type="h2" text-align="left" title-size="x-large" title-color="gray" upperline="no-upperline"
+                title-display="inline-block" title-shadow="" title-height="densest" title-margin="margin-flush"
+                title-weight="w-8" is-plm-hub="false">
+                Featured Content
+            </ptc-title>
+        </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();