diff --git a/src/documentation/TwoColLayoutWSticky.drawio b/src/documentation/TwoColLayoutWSticky.drawio
new file mode 100644
index 000000000..3f3b358ed
--- /dev/null
+++ b/src/documentation/TwoColLayoutWSticky.drawio
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/documentation/TwoColLayoutWSticky.svg b/src/documentation/TwoColLayoutWSticky.svg
new file mode 100644
index 000000000..140ac35d4
--- /dev/null
+++ b/src/documentation/TwoColLayoutWSticky.svg
@@ -0,0 +1 @@
+Sticky slot: primaryTop SMALL SCREENS slot: sidebarTop (mobile only)
slot: sidebarTop (mobile only) slot: primaryMid slot: sidebarBottom (mobile only)
slot: sidebarBottom (mobile onl... slot: primaryBottom slot: sidebarTop (desktop only)
slot: sidebarTop (de... slot: sidebarBottom (desktop only)
slot: sidebarBottom... XLARGE / LARGE / MEDIUM SCREENS
XLARGE / LARGE / MEDIUM SCREENS slot: primaryTop slot: primaryMid slot: primaryBottom slot: sidebarTop slot: sidebarBottom Text is not SVG - cannot display
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib-components/index.js b/src/lib-components/index.js
index efbb8353c..619ef5c31 100644
--- a/src/lib-components/index.js
+++ b/src/lib-components/index.js
@@ -127,3 +127,5 @@ export { default as StoryWithImage } from './StoryWithImage.vue'
export { default as TabItem } from './TabItem.vue'
export { default as TabList } from './TabList.vue'
export { default as VideoEmbed } from './VideoEmbed.vue'
+// LAYOUTS
+export { default as TwoColLayoutWStickySideBar } from './TwoColLayoutWStickySideBar.vue' // used in FTVA
diff --git a/src/stories/TwoColLayoutStickySideBar.spec.js b/src/stories/TwoColLayoutStickySideBar.spec.js
new file mode 100644
index 000000000..bea91c398
--- /dev/null
+++ b/src/stories/TwoColLayoutStickySideBar.spec.js
@@ -0,0 +1,10 @@
+describe('LAYOUT / Two Columns W Sticky Sidebar', () => {
+ it('Default', () => {
+ cy.visit(
+ '/iframe.html?id=layout-2-column-layout-with-sticky-sidebar--event-series'
+ )
+ cy.get('.two-column').should('exist')
+
+ cy.percySnapshot('LAYOUT / Two Columns W Sticky Sidebar: Event Series')
+ })
+})
diff --git a/src/stories/TwoColLayoutWStickySideBar.stories.js b/src/stories/TwoColLayoutWStickySideBar.stories.js
new file mode 100644
index 000000000..a8655d1f3
--- /dev/null
+++ b/src/stories/TwoColLayoutWStickySideBar.stories.js
@@ -0,0 +1,209 @@
+import { computed } from 'vue'
+import BlockEventDetail from '@/lib-components/BlockEventDetail.vue'
+import BlockInfo from '@/lib-components/BlockInfo.vue'
+import ButtonDropdown from '@/lib-components/ButtonDropdown.vue'
+import CardMeta from '@/lib-components/CardMeta.vue'
+import DividerWayFinder from '@/lib-components/DividerWayFinder.vue'
+import RichText from '@/lib-components/RichText.vue'
+import SectionWrapper from '@/lib-components/SectionWrapper.vue'
+import TwoColLayoutWStickySideBar from '@/lib-components/TwoColLayoutWStickySideBar.vue'
+
+// Storybook default settings
+export default {
+ title: 'LAYOUT / 2 Column Layout with Sticky Sidebar',
+ components: TwoColLayoutWStickySideBar,
+}
+
+// Mock data for Event Series Page components
+const reallyLongRichText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.'
+const mockSeriesPageData = {
+ title: 'Page.Title',
+ eventDescription: 'Page.eventDescription, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
+ ftvaEventIntroduction: 'Page.ftvaEventIntroduction, Shorter intro text here.',
+ guestSpeaker: 'Page.guestSpeaker, Guest Speaker Name',
+ richText: `page.richText, page rich-text content here on some pages.${reallyLongRichText}`,
+ startDate: '2021-09-01',
+ endDate: '2021-09-30',
+ ongoing: false,
+ location: [
+ {
+ id: '195746',
+ title: 'Billy Wilder Theater',
+ url: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater',
+ uri: 'locations/billy-wilder-theater'
+ },
+ {
+ id: '195746',
+ title: 'Other Location',
+ url: 'https://test-craft.library.ucla.edu/locations/other-locations',
+ uri: 'locations/somelocation'
+ }
+ ]
+}
+const ftvaTicketInformation = [
+ {
+ title: 'Admission is free',
+ },
+ {
+ title: 'Seats are assigned on a first come, first served basis',
+ },
+ {
+ title: 'The box office opens one hour before the event',
+ },
+]
+
+export function EventSeries() {
+ return {
+ data() {
+ return {
+ page: mockSeriesPageData,
+ ftvaTicketInformation
+ }
+ },
+ provide() {
+ return {
+ theme: computed(() => 'ftva'),
+ }
+ },
+ components: { TwoColLayoutWStickySideBar, CardMeta, RichText, BlockInfo, BlockEventDetail, SectionWrapper },
+ template: `
+ Previous Section Content
+
+
+
+
+
+
+
+
+
+
+ Next Section Content
+
`
+ }
+}
+
+// Mock data for Event Detail Page components
+const mockEventDetailPageData = {
+ id: '2847944',
+ typeHandle: 'ftvaEvent',
+ title: 'La Région Centrale 03-08-24',
+ tagLabels: [
+ {
+ title: 'Guest speaker'
+ },
+ {
+ title: '35mm'
+ }
+ ],
+ startDateWithTime: '2024-03-09T03:30:00+00:00',
+ category: 'Series Title Here',
+ endTime: '20:30:00',
+ location: [
+ {
+ id: '195746',
+ title: 'Billy Wilder Theater',
+ url: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater',
+ uri: 'locations/billy-wilder-theater'
+ },
+ {
+ id: '195746',
+ title: 'Other Location',
+ url: 'https://test-craft.library.ucla.edu/locations/other-locations',
+ uri: 'locations/somelocation'
+ }
+ ],
+ acknowledements: 'page.acknowledgements text here', // [SIC] this is the way it's spelled in the query
+}
+// for Add to Calendar Button
+const mockCalendarData = {
+ isEvent: true,
+ title: 'La Région Centrale Screening',
+ startDateWithTime: '2025-07-08T02:30:00+00:00',
+ endTime: '20:30:00',
+ location: [
+ {
+ title: 'Billy Wilder Theater',
+ campusMapId: null,
+ publicUrl: 'https://www.cinema.ucla.edu/billy-wilder-theater',
+ address: []
+ }
+ ],
+ eventDescription: 'Admission is free. No advance reservations. Your seat will be assigned to you when you pick up your ticket at the box office. Seats are assigned on a first come, first served basis. The box office opens one hour before the event.
\nLa Région Centrale
\nCanada, 1971
\nThe late avant-garde master Michael Snow’s work explores the nature of perception, consciousness, participation, and in many ways is uncategorizable but relation to time is evident. He worked in many mediums and his films playfully and prolifically rethink the parameters while requiring audiences to actively participate in this work. La Région Centrale is a three-hour-long film that calls attention to the mechanics of filmmaking, using a computer-programmed, motorized tripod that rotates the camera 360 degrees in any direction, repeatedly, without dialogue or any other subject beyond the landscape, over the course of a day.'
+}
+
+export function FTVAEventDetail() {
+ return {
+ data() {
+ return {
+ page: mockEventDetailPageData,
+ ftvaTicketInformation,
+ mockCalendarData
+ }
+ },
+ provide() {
+ return {
+ theme: computed(() => 'ftva'),
+ }
+ },
+ components: { TwoColLayoutWStickySideBar, ButtonDropdown, CardMeta, DividerWayFinder, RichText, BlockInfo, BlockEventDetail, SectionWrapper },
+ template: `
+
Previous Section Content
+
+
+
+
+
+
+
+
+
Next Section Content
+