@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/callout/callout.test.js

@@ -0,0 +1,73 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/callout/callout.twig';
+
+describe('Callout Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      content: 'This is the main content of the callout.',
+    });
+
+    expect(c.querySelectorAll('.ct-callout')).toHaveLength(1);
+    expect(c.querySelector('.ct-callout__content').textContent.trim()).toEqual('This is the main content of the callout.');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content_top: 'Top content',
+      title: 'Callout Title',
+      content: 'This is the main content of the callout.',
+      links: [
+        { text: 'Link 1', url: 'https://example.com', is_new_window: true, is_external: true },
+        { text: 'Link 2', url: 'https://example.com' },
+      ],
+      content_bottom: 'Bottom content',
+      theme: 'dark',
+      vertical_spacing: 'both',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-callout');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('ct-vertical-spacing-inset--both')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+
+    expect(c.querySelector('.ct-callout__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-callout__title').textContent.trim()).toEqual('Callout Title');
+    expect(c.querySelector('.ct-callout__content').textContent.trim()).toEqual('This is the main content of the callout.');
+    expect(c.querySelector('.ct-callout__content-bottom').textContent.trim()).toEqual('Bottom content');
+
+    const links = c.querySelectorAll('.ct-callout__links .ct-button');
+    expect(links).toHaveLength(2);
+    expect(links[0].textContent.trim()).toContain('Link 1');
+    expect(links[0].getAttribute('href')).toEqual('https://example.com');
+    expect(links[0].getAttribute('target')).toEqual('_blank');
+    expect(links[1].textContent.trim()).toContain('Link 2');
+    expect(links[1].getAttribute('href')).toEqual('https://example.com');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with multiple links', async () => {
+    const c = await dom(template, {
+      links: [
+        { text: 'Link 1', url: 'https://example.com' },
+        { text: 'Link 2', url: 'https://example.com' },
+        { text: 'Link 3', url: 'https://example.com' },
+      ],
+    });
+
+    const links = c.querySelectorAll('.ct-callout__links .ct-button');
+    expect(links).toHaveLength(3);
+    expect(links[0].textContent.trim()).toEqual('Link 1');
+    expect(links[1].textContent.trim()).toEqual('Link 2');
+    expect(links[2].textContent.trim()).toEqual('Link 3');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/02-molecules/callout/callout.twig

@@ -0,0 +1,108 @@
+{#
+/**
+ * @file
+ * CivicTheme Callout component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - vertical_spacing: [string] Vertical spacing position (top, bottom, both).
+ * - modifier_class: [string] Additional CSS classes.
+ * - links: [array] Callout links:
+ *   Each item contains:
+ *   - text: [string] Link text.
+ *   - url: [string] Link URL.
+ *   - is_new_window: [boolean] Whether to open link in a new window.
+ *   - is_external: [boolean] Whether the link is external.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Title text.
+ * - content: Content text.
+ * - content_top: Callout top content.
+ * - content_bottom: Callout bottom content.
+ *
+ * Blocks:
+ * - content_top_block
+ * - content_block
+ * - links_block
+ * - content_bottom_block
+ */
+#}
+
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing-inset--%s'|format(vertical_spacing) : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %}
+
+<div class="ct-callout {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+  <div class="container">
+    <div class="row">
+      <div class="col-xxs-12">
+        <div class="ct-callout__wrapper">
+          {% block content_top_block %}
+            {% if content_top is not empty %}
+              <div class="ct-callout__content-top">
+                {{- content_top -}}
+              </div>
+            {% endif %}
+          {% endblock %}
+
+          {% block content_block %}
+            {% if title is not empty or content is not empty %}
+              <div class="ct-callout__inner">
+                {% if title %}
+                  {% include '@atoms/heading/heading.twig' with {
+                    content: title,
+                    level: 4,
+                    theme: theme,
+                    modifier_class: 'ct-callout__title',
+                  } only %}
+                {% endif %}
+
+                {% if content is not empty %}
+                  {% include '@atoms/paragraph/paragraph.twig' with {
+                    theme: theme,
+                    content: content,
+                    no_margin: true,
+                    modifier_class: 'ct-callout__content',
+                  } only %}
+                {% endif %}
+              </div>
+            {% endif %}
+          {% endblock %}
+
+          {% block links_block %}
+            {% set link_items = [] %}
+            {% for link in links %}
+              {%- set link %}
+                {% include '@atoms/button/button.twig' with {
+                  theme: theme,
+                  kind: 'link',
+                  type: loop.index > 1 ? 'secondary' : 'primary',
+                  text: link.text,
+                  url: link.url,
+                  is_external: link.is_external,
+                  is_new_window: link.is_new_window,
+                } only %}
+              {% endset -%}
+              {% set link_items = link_items|merge([link]) %}
+            {% endfor %}
+
+            {% include '@base/item-list/item-list.twig' with {
+              items: link_items,
+              size: 'small',
+              modifier_class: 'ct-callout__links',
+            } only %}
+          {% endblock %}
+
+          {% block content_bottom_block %}
+            {% if content_bottom is not empty %}
+              <div class="ct-callout__content-bottom">
+                {{- content_bottom -}}
+              </div>
+            {% endif %}
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/components/02-molecules/event-card/__snapshots__/event-card.test.js.snap

@@ -0,0 +1,382 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Event Card Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-event-card ct-theme-dark ct-event-card--with-image ct-event-card--image-over ct-event-card--card-clickable custom-class"
+    data-test="true"
+  >
+    
+                  
+    <div
+      class="ct-event-card__image"
+    >
+      
+          
+
+
+  
+      <img
+        alt="Image description"
+        class="ct-image ct-theme-dark "
+        src="https://example.com/image.jpg"
+      />
+      
+
+                                    
+      <div
+        class="ct-event-card__image__over"
+      >
+        
+                Image over content
+              
+      </div>
+      
+                              
+    </div>
+    
+          
+          
+    <div
+      class="ct-event-card__content"
+    >
+      
+                              
+      <div
+        class="ct-event-card__content-top"
+      >
+        Top content
+      </div>
+      
+                  
+                              
+            
+      <div
+        class="ct-event-card__date"
+      >
+        
+              
+
+  
+  
+  
+    
+        <span
+          class="ct-tag ct-theme-dark ct-tag--secondary ct-tag--with-icon ct-tag--icon-before  "
+        >
+                    
+              
+          <svg
+            aria-hidden="true"
+            class="ct-icon ct-tag__icon"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            
+
+            <path
+              d="M12 14C12.1978 14 12.3911 13.9414 12.5556 13.8315C12.72 13.7216 12.8482 13.5654 12.9239 13.3827C12.9996 13.2 13.0194 12.9989 12.9808 12.8049C12.9422 12.6109 12.847 12.4327 12.7071 12.2929C12.5673 12.153 12.3891 12.0578 12.1951 12.0192C12.0011 11.9806 11.8 12.0004 11.6173 12.0761C11.4346 12.1518 11.2784 12.28 11.1685 12.4444C11.0586 12.6089 11 12.8022 11 13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14ZM17 14C17.1978 14 17.3911 13.9414 17.5556 13.8315C17.72 13.7216 17.8482 13.5654 17.9239 13.3827C17.9996 13.2 18.0194 12.9989 17.9808 12.8049C17.9422 12.6109 17.847 12.4327 17.7071 12.2929C17.5673 12.153 17.3891 12.0578 17.1951 12.0192C17.0011 11.9806 16.8 12.0004 16.6173 12.0761C16.4346 12.1518 16.2784 12.28 16.1685 12.4444C16.0586 12.6089 16 12.8022 16 13C16 13.2652 16.1054 13.5196 16.2929 13.7071C16.4804 13.8946 16.7348 14 17 14ZM12 18C12.1978 18 12.3911 17.9414 12.5556 17.8315C12.72 17.7216 12.8482 17.5654 12.9239 17.3827C12.9996 17.2 13.0194 16.9989 12.9808 16.8049C12.9422 16.6109 12.847 16.4327 12.7071 16.2929C12.5673 16.153 12.3891 16.0578 12.1951 16.0192C12.0011 15.9806 11.8 16.0004 11.6173 16.0761C11.4346 16.1518 11.2784 16.28 11.1685 16.4444C11.0586 16.6089 11 16.8022 11 17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18ZM17 18C17.1978 18 17.3911 17.9414 17.5556 17.8315C17.72 17.7216 17.8482 17.5654 17.9239 17.3827C17.9996 17.2 18.0194 16.9989 17.9808 16.8049C17.9422 16.6109 17.847 16.4327 17.7071 16.2929C17.5673 16.153 17.3891 16.0578 17.1951 16.0192C17.0011 15.9806 16.8 16.0004 16.6173 16.0761C16.4346 16.1518 16.2784 16.28 16.1685 16.4444C16.0586 16.6089 16 16.8022 16 17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18ZM7 14C7.19778 14 7.39112 13.9414 7.55557 13.8315C7.72002 13.7216 7.84819 13.5654 7.92388 13.3827C7.99957 13.2 8.01937 12.9989 7.98079 12.8049C7.9422 12.6109 7.84696 12.4327 7.70711 12.2929C7.56725 12.153 7.38907 12.0578 7.19509 12.0192C7.00111 11.9806 6.80004 12.0004 6.61732 12.0761C6.43459 12.1518 6.27841 12.28 6.16853 12.4444C6.05865 12.6089 6 12.8022 6 13C6 13.2652 6.10536 13.5196 6.29289 13.7071C6.48043 13.8946 6.73478 14 7 14ZM19 4H18V3C18 2.73478 17.8946 2.48043 17.7071 2.29289C17.5196 2.10536 17.2652 2 17 2C16.7348 2 16.4804 2.10536 16.2929 2.29289C16.1054 2.48043 16 2.73478 16 3V4H8V3C8 2.73478 7.89464 2.48043 7.70711 2.29289C7.51957 2.10536 7.26522 2 7 2C6.73478 2 6.48043 2.10536 6.29289 2.29289C6.10536 2.48043 6 2.73478 6 3V4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V10H20V19ZM20 8H4V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7V8ZM7 18C7.19778 18 7.39112 17.9414 7.55557 17.8315C7.72002 17.7216 7.84819 17.5654 7.92388 17.3827C7.99957 17.2 8.01937 16.9989 7.98079 16.8049C7.9422 16.6109 7.84696 16.4327 7.70711 16.2929C7.56725 16.153 7.38907 16.0578 7.19509 16.0192C7.00111 15.9806 6.80004 16.0004 6.61732 16.0761C6.43459 16.1518 6.27841 16.28 6.16853 16.4444C6.05865 16.6089 6 16.8022 6 17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18Z"
+            />
+            
+
+          </svg>
+          
+                      
+          <span
+            class="ct-datetime "
+          >
+            
+    
+            <time
+              class="ct-timestamp__start"
+              datetime="2023-01-01T12:00:00Z"
+            >
+              2023-01-01 12:00
+            </time>
+            
+      
+          </span>
+          
+            
+      
+        </span>
+        
+            
+      </div>
+      
+                  
+                                          
+      <div
+        class="ct-event-card__title"
+      >
+                                      
+        <a
+          class="ct-event-card__title-link"
+          href="https://example.com"
+        >
+          Event Title
+        </a>
+        
+                          
+      </div>
+      
+                  
+                              
+      <div
+        class="ct-event-card__middle"
+      >
+        Middle content
+      </div>
+      
+                  
+                              
+
+
+      <div
+        class="ct-paragraph ct-theme-dark ct-paragraph--regular  ct-event-card__location"
+      >
+        Event Location
+      </div>
+                        
+                              
+
+
+      <div
+        class="ct-paragraph ct-theme-dark ct-paragraph--regular ct-paragraph--no-margin ct-event-card__summary"
+      >
+        This is a summary of the event.
+      </div>
+                        
+                              
+      <div
+        class="ct-event-card__tags"
+      >
+        
+                              
+
+  
+        <div
+          class="ct-tag-list ct-theme-dark  "
+        >
+          
+              
+                                                                                          
+
+  
+          <ul
+            class="ct-item-list ct-item-list--horizontal ct-item-list--small  ct-tag-list__content"
+          >
+            
+                  
+            <li
+              class="ct-item-list__item"
+            >
+                                      
+
+  
+  
+  
+    
+              <span
+                class="ct-tag ct-theme-dark ct-tag--primary    "
+              >
+                    Tag 1  
+              </span>
+              
+          
+            </li>
+            
+                        
+            <li
+              class="ct-item-list__item"
+            >
+                                      
+
+  
+  
+  
+    
+              <span
+                class="ct-tag ct-theme-dark ct-tag--primary    "
+              >
+                    Tag 2  
+              </span>
+              
+          
+            </li>
+            
+            
+          </ul>
+          
+          
+                
+        </div>
+        
+              
+                              
+        <div
+          class="ct-event-card__link-graphic"
+        >
+          
+                  
+          <svg
+            aria-hidden="true"
+            class="ct-icon ct-icon--size-regular"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            
+
+            <path
+              d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+            />
+            
+
+          </svg>
+          
+                
+        </div>
+        
+                          
+      </div>
+      
+                  
+                              
+      <div
+        class="ct-event-card__content-bottom"
+      >
+        Bottom content
+      </div>
+      
+                        
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Event Card Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-event-card ct-theme-light    "
+  >
+    
+              
+          
+    <div
+      class="ct-event-card__content"
+    >
+      
+                          
+                              
+            
+      <div
+        class="ct-event-card__date"
+      >
+        
+              
+
+  
+  
+  
+    
+        <span
+          class="ct-tag ct-theme-light ct-tag--secondary ct-tag--with-icon ct-tag--icon-before  "
+        >
+                    
+              
+          <svg
+            aria-hidden="true"
+            class="ct-icon ct-tag__icon"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            
+
+            <path
+              d="M12 14C12.1978 14 12.3911 13.9414 12.5556 13.8315C12.72 13.7216 12.8482 13.5654 12.9239 13.3827C12.9996 13.2 13.0194 12.9989 12.9808 12.8049C12.9422 12.6109 12.847 12.4327 12.7071 12.2929C12.5673 12.153 12.3891 12.0578 12.1951 12.0192C12.0011 11.9806 11.8 12.0004 11.6173 12.0761C11.4346 12.1518 11.2784 12.28 11.1685 12.4444C11.0586 12.6089 11 12.8022 11 13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14ZM17 14C17.1978 14 17.3911 13.9414 17.5556 13.8315C17.72 13.7216 17.8482 13.5654 17.9239 13.3827C17.9996 13.2 18.0194 12.9989 17.9808 12.8049C17.9422 12.6109 17.847 12.4327 17.7071 12.2929C17.5673 12.153 17.3891 12.0578 17.1951 12.0192C17.0011 11.9806 16.8 12.0004 16.6173 12.0761C16.4346 12.1518 16.2784 12.28 16.1685 12.4444C16.0586 12.6089 16 12.8022 16 13C16 13.2652 16.1054 13.5196 16.2929 13.7071C16.4804 13.8946 16.7348 14 17 14ZM12 18C12.1978 18 12.3911 17.9414 12.5556 17.8315C12.72 17.7216 12.8482 17.5654 12.9239 17.3827C12.9996 17.2 13.0194 16.9989 12.9808 16.8049C12.9422 16.6109 12.847 16.4327 12.7071 16.2929C12.5673 16.153 12.3891 16.0578 12.1951 16.0192C12.0011 15.9806 11.8 16.0004 11.6173 16.0761C11.4346 16.1518 11.2784 16.28 11.1685 16.4444C11.0586 16.6089 11 16.8022 11 17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18ZM17 18C17.1978 18 17.3911 17.9414 17.5556 17.8315C17.72 17.7216 17.8482 17.5654 17.9239 17.3827C17.9996 17.2 18.0194 16.9989 17.9808 16.8049C17.9422 16.6109 17.847 16.4327 17.7071 16.2929C17.5673 16.153 17.3891 16.0578 17.1951 16.0192C17.0011 15.9806 16.8 16.0004 16.6173 16.0761C16.4346 16.1518 16.2784 16.28 16.1685 16.4444C16.0586 16.6089 16 16.8022 16 17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18ZM7 14C7.19778 14 7.39112 13.9414 7.55557 13.8315C7.72002 13.7216 7.84819 13.5654 7.92388 13.3827C7.99957 13.2 8.01937 12.9989 7.98079 12.8049C7.9422 12.6109 7.84696 12.4327 7.70711 12.2929C7.56725 12.153 7.38907 12.0578 7.19509 12.0192C7.00111 11.9806 6.80004 12.0004 6.61732 12.0761C6.43459 12.1518 6.27841 12.28 6.16853 12.4444C6.05865 12.6089 6 12.8022 6 13C6 13.2652 6.10536 13.5196 6.29289 13.7071C6.48043 13.8946 6.73478 14 7 14ZM19 4H18V3C18 2.73478 17.8946 2.48043 17.7071 2.29289C17.5196 2.10536 17.2652 2 17 2C16.7348 2 16.4804 2.10536 16.2929 2.29289C16.1054 2.48043 16 2.73478 16 3V4H8V3C8 2.73478 7.89464 2.48043 7.70711 2.29289C7.51957 2.10536 7.26522 2 7 2C6.73478 2 6.48043 2.10536 6.29289 2.29289C6.10536 2.48043 6 2.73478 6 3V4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V10H20V19ZM20 8H4V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7V8ZM7 18C7.19778 18 7.39112 17.9414 7.55557 17.8315C7.72002 17.7216 7.84819 17.5654 7.92388 17.3827C7.99957 17.2 8.01937 16.9989 7.98079 16.8049C7.9422 16.6109 7.84696 16.4327 7.70711 16.2929C7.56725 16.153 7.38907 16.0578 7.19509 16.0192C7.00111 15.9806 6.80004 16.0004 6.61732 16.0761C6.43459 16.1518 6.27841 16.28 6.16853 16.4444C6.05865 16.6089 6 16.8022 6 17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18Z"
+            />
+            
+
+          </svg>
+          
+                      
+          <span
+            class="ct-datetime "
+          >
+            
+    
+            <time
+              class="ct-timestamp__start"
+              datetime="2023-01-01T12:00:00Z"
+            >
+              2023-01-01 12:00
+            </time>
+            
+      
+          </span>
+          
+            
+      
+        </span>
+        
+            
+      </div>
+      
+                  
+                                          
+      <div
+        class="ct-event-card__title"
+      >
+                                      Event Title
+                          
+      </div>
+      
+                  
+                          
+                              
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-event-card__location"
+      >
+        Event Location
+      </div>
+                        
+                              
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular ct-paragraph--no-margin ct-event-card__summary"
+      >
+        This is a summary of the event.
+      </div>
+                        
+                          
+                                
+    </div>
+    
+      
+  </div>
+  
+
+</div>
+`;