<div class="c-left-aligned-content o-column-panel" data-bkg-theme="base">
<div class="o-container">
<div class="o-row">
<div class="o-column-panel__header o-col o-col-sm-md-4">
<div class="o-column-panel__header-content">
<h2 class="o-column-panel__title f-title--h3">Left Aligned Content</h2>
<div class="o-column-panel__description f-text--reg">
Optional description content
</div>
<div class="o-column-panel__cta f-text--reg">
<a href="#" class="o-column-panel__cta-link o-btn o-btn--primary">Optional CTA</a>
</div>
</div>
</div>
<div class="o-column-panel__content o-col o-col-sm-md-8">
<div class="c-la-content-block c-la-inline-image">
<img src="/images/mountain.jpg" alt="" />
</div>
<div class="c-la-content-block o-wysiwyg c-la-wysiwyg">
<p>To ensure the health and safety of our guests, staff and volunteers, we have carefully developed new health and safety protocols, following guidelines provided by the Centers for Disease Control and Prevention, the Pennsylvania Department of Health, the Philadelphia Department of Public Health, Drexel University, and in consultation with national museum organizations as well as fellow museums around the world, across the nation and in Philadelphia.</p>
</div>
<div class="c-la-content-block c-la-accordion-content">
<div class="o-accordion c-la-accordion__accordion">
<button class="o-accordion__button js-accordion-toggle o-btn" aria-expanded="false">
<span class="c-la-accordion__hidden">
<span class="o-btn__icon-left" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>View More
</span>
<span class="c-la-accordion__showing">
<span class="o-btn__icon-left" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
</svg>
</span>View Less
</span>
</button>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<div class="c-la-accordion__inner-text o-wysiwyg o-wysiwyg--small">
<p>Drowning world is a unique photographic exploration of flooding, a stark portrayal of the human condition within the context of overwhelming climate events around the world.</p>
<p><strong>Strong</strong> <em>italic</em> <strike>strike</strike> <u>underline</u> <a href="#">inline link</a> lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est velit, interdum non finibus et, italic text bold text. Cras ut ornare libero. Donec ac fringilla quam, dictum bibendum ex. Vestibulum eu felis viverra, porta nibh eget, finibus urna. Mauris non lectus non nisl mattis tincidunt. Maecenas a tristique nisl, eget sollicitudin erat. Nulla maximus ornare velit, sed vulputate arcu commodo sit amet. Maecenas eu lorem nulla. Ut pretium sapien nec elit consequat tristique. Cras id nisl et est condimentum vestibulum in et augue. Mauris est dolor, luctus quis elementum sit amet, luctus et felis. Mauris vehicula felis vitae viverra lobortis. Nam eu sem consectetur, fringilla ipsum id, tincidunt quam. Ut lorem ipsum dolor sit diam at posuere. Nulla ut rhoncus orci. Maecenas tincidunt rutrum luctus. Sed erat ante, sodales quis rhoncus vitae, inline link. Ut odio est, lobortis quis tempus vitae, pulvinar vitae dolor. Donec dapibus lorem nec lorem porta, in laoreet nulla feugiat. Proin euismod risus tellus, in euismod turpis pulvinar non.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est velit, interdum non finibus et, italic text bold text. Cras ut ornare libero. Donec ac fringilla quam, dictum bibendum ex. Vestibulum eu felis viverra, porta nibh eget, finibus urna. Mauris non lectus non nisl mattis tincidunt. Maecenas a tristique nisl, eget sollicitudin erat. Nulla maximus ornare velit, sed vulputate arcu commodo sit amet. Maecenas eu lorem nulla. Ut pretium sapien nec elit consequat tristique. Cras id nisl et est condimentum vestibulum in et augue. Mauris est dolor, luctus quis elementum sit amet, luctus et felis. Mauris vehicula felis vitae viverra lobortis. Nam eu sem consectetur, fringilla ipsum id, tincidunt quam. Ut lorem ipsum dolor sit diam at posuere. Nulla ut rhoncus orci. Maecenas tincidunt rutrum luctus. Sed erat ante, sodales quis rhoncus vitae, inline link. Ut odio est, lobortis quis tempus vitae, pulvinar vitae dolor. Donec dapibus lorem nec lorem porta, in laoreet nulla feugiat. Proin euismod risus tellus, in euismod turpis pulvinar non.</p>
</div>
</div>
</div>
</div>
<div class="c-la-content-block c-la-two-column-content">
<div class="c-la-two-column-content__column">
<h3 class="c-la-two-column-content__column-title f-title--h6">Public Hours</h3>
<div class="c-la-two-column-content__column-text f-text--small">
<p>Fridays: 10 a.m.–5 p.m.</p>
<p>Saturdays: 10 a.m.–6 p.m.</p>
<p>Sundays: 10 a.m.–5 p.m.</p>
</div>
</div>
<div class="c-la-two-column-content__column">
<h3 class="c-la-two-column-content__column-title f-title--h6">Members-only hours</h3>
<div class="c-la-two-column-content__column-text f-text--small">
<p>Fridays, Saturdays, and <br />Sundays: 10 a.m.–11 a.m. </p>
</div>
</div>
</div>
<div class="c-la-content-block c-la-two-column-cta">
<h3 id="two-column-cta-title-3704" class="c-la-two-column-cta__title f-title--h4">Discounts</h3>
<ul class="c-la-two-column-cta__items o-row" aria-labelledby="two-column-cta-title-3704">
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">Access</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">STAMP</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">Philadelphia City Pass</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">The Philadelphia Pass®</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
<li class="c-la-two-column-cta__item o-col o-col-sm-6">
<a href="#" class="c-la-two-column-cta__item-link">
<h4 class="c-la-two-column-cta__item-title f-title--h6">Association of Science Technology Centers</h4>
<p class="c-la-two-column-cta__item-content f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.</p>
<span class="c-la-two-column-cta__item-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="c-la-content-block c-la-callout-link">
<a class="c-la-callout-link__callout" href="#">
<h3 class="c-la-callout-link__callout-title f-title--h5">Become a member<span class="c-la-callout-link__callout-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</h3>
<p class="c-la-callout-link__callout-content f-text--small">Your membership supports our efforts to ensure a healthy, sustainable and equitable planet. </p>
</a>
</div>
<div class="c-la-content-block c-la-data-table">
<h3 class="u-sr-only">Academy Pricing</h3>
<dl class="o-data-list">
<div class="o-data-list__item">
<dt class="o-data-list__item-title f-bold">Adults (13+)</dt>
<dd class="o-data-list__item-value">$22.00</dd>
</div>
<div class="o-data-list__item">
<dt class="o-data-list__item-title f-bold">Seniors (65+)</dt>
<dd class="o-data-list__item-value">$19.00</dd>
</div>
<div class="o-data-list__item">
<dt class="o-data-list__item-title f-bold">Military and Students (with ID)</dt>
<dd class="o-data-list__item-value">$19.00</dd>
</div>
<div class="o-data-list__item">
<dt class="o-data-list__item-title f-bold">Children ages 2-12</dt>
<dd class="o-data-list__item-value">$18.00</dd>
</div>
<div class="o-data-list__item">
<dt class="o-data-list__item-title f-bold">Children under 2</dt>
<dd class="o-data-list__item-value">Free</dd>
</div>
<div class="o-data-list__item">
<dt class="o-data-list__item-title f-bold">Drexel Dragon Card</dt>
<dd class="o-data-list__item-value">Free</dd>
</div>
<div class="o-data-list__item">
<dt class="o-data-list__item-title f-bold">Members</dt>
<dd class="o-data-list__item-value">Free</dd>
</div>
</dl>
</div>
<div class="c-la-content-block o-wysiwyg c-la-wysiwyg">
<p>To ensure the health and safety of our guests, staff and volunteers, we have carefully developed new health and safety protocols, following guidelines provided by the Centers for Disease Control and Prevention, the Pennsylvania Department of Health, the Philadelphia Department of Public Health, Drexel University, and in consultation with national museum organizations as well as fellow museums around the world, across the nation and in Philadelphia.</p>
</div>
<div class="c-la-content-block c-la-accordion-group">
<div class="o-accordion-group">
<h3 id="directions-title-4431" class="u-sr-only ">Directions</h3>
<ul class="o-accordion-group__items" aria-labelledby="directions-title-4431">
<li class="o-accordion-group__item">
<div class="o-accordion o-accordion-group__item-entry">
<h4 class="f-title--h6">
<button class="o-accordion__button js-accordion-toggle o-accordion-group__item-button js-accordion-auto-close" aria-expanded="false">
Public Transit
<span class="o-accordion__icon" aria-hidden="true">
<span class="c-directions__accordion-icon" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</span>
</button>
</h4>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<div class="o-accordion-group__item-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</li>
<li class="o-accordion-group__item">
<div class="o-accordion o-accordion-group__item-entry">
<h4 class="f-title--h6">
<button class="o-accordion__button js-accordion-toggle o-accordion-group__item-button js-accordion-auto-close" aria-expanded="false">
Philly PLASH
<span class="o-accordion__icon" aria-hidden="true">
<span class="c-directions__accordion-icon" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</span>
</button>
</h4>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<div class="o-accordion-group__item-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</li>
<li class="o-accordion-group__item">
<div class="o-accordion o-accordion-group__item-entry">
<h4 class="f-title--h6">
<button class="o-accordion__button js-accordion-toggle o-accordion-group__item-button js-accordion-auto-close" aria-expanded="false">
By Car
<span class="o-accordion__icon" aria-hidden="true">
<span class="c-directions__accordion-icon" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</span>
</button>
</h4>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<div class="o-accordion-group__item-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</li>
<li class="o-accordion-group__item">
<div class="o-accordion o-accordion-group__item-entry">
<h4 class="f-title--h6">
<button class="o-accordion__button js-accordion-toggle o-accordion-group__item-button js-accordion-auto-close" aria-expanded="false">
Parking
<span class="o-accordion__icon" aria-hidden="true">
<span class="c-directions__accordion-icon" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</span>
</button>
</h4>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<div class="o-accordion-group__item-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme is defined ? panelColorTheme : 'base' %}
{% set idAttr = id is defined and id ? 'id="' ~ id ~ '"' : '' %}
<div {{ idAttr }} class="c-left-aligned-content o-column-panel" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<div class="o-row">
<div class="o-column-panel__header o-col o-col-sm-md-4">
<div class="o-column-panel__header-content">
<h2 class="o-column-panel__title f-title--h3">{{ title }}</h2>
{% if description %}
<div class="o-column-panel__description f-text--reg">
{{ description|raw }}
</div>
{% endif %}
{% if ctaLink %}
<div class="o-column-panel__cta f-text--reg">
<a href="{{ ctaLink }}" class="o-column-panel__cta-link o-btn o-btn--primary">{{ ctaTitle }}</a>
</div>
{% endif %}
</div>
</div>
<div class="o-column-panel__content o-col o-col-sm-md-8">
{% block content %}
{# Inline Image #}
{% include "06-components/left-aligned-submodules/la-inline-image" with {
image: '<img src="/images/mountain.jpg" alt="" />'
} %}
{# WYSIWYG #}
{% include "06-components/left-aligned-submodules/la-wysiwyg" with {
content: '<p>To ensure the health and safety of our guests, staff and volunteers, we have carefully developed new health and safety protocols, following guidelines provided by the Centers for Disease Control and Prevention, the Pennsylvania Department of Health, the Philadelphia Department of Public Health, Drexel University, and in consultation with national museum organizations as well as fellow museums around the world, across the nation and in Philadelphia.</p>'
} %}
{# Accordion Content #}
{% include "06-components/left-aligned-submodules/la-accordion-content" with {
content: '<p>Drowning world is a unique photographic exploration of flooding, a stark portrayal of the human condition within the context of overwhelming climate events around the world.</p><p><strong>Strong</strong> <em>italic</em> <strike>strike</strike> <u>underline</u> <a href="#">inline link</a> lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est velit, interdum non finibus et, italic text bold text. Cras ut ornare libero. Donec ac fringilla quam, dictum bibendum ex. Vestibulum eu felis viverra, porta nibh eget, finibus urna. Mauris non lectus non nisl mattis tincidunt. Maecenas a tristique nisl, eget sollicitudin erat. Nulla maximus ornare velit, sed vulputate arcu commodo sit amet. Maecenas eu lorem nulla. Ut pretium sapien nec elit consequat tristique. Cras id nisl et est condimentum vestibulum in et augue. Mauris est dolor, luctus quis elementum sit amet, luctus et felis. Mauris vehicula felis vitae viverra lobortis. Nam eu sem consectetur, fringilla ipsum id, tincidunt quam. Ut lorem ipsum dolor sit diam at posuere. Nulla ut rhoncus orci. Maecenas tincidunt rutrum luctus. Sed erat ante, sodales quis rhoncus vitae, inline link. Ut odio est, lobortis quis tempus vitae, pulvinar vitae dolor. Donec dapibus lorem nec lorem porta, in laoreet nulla feugiat. Proin euismod risus tellus, in euismod turpis pulvinar non.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est velit, interdum non finibus et, italic text bold text. Cras ut ornare libero. Donec ac fringilla quam, dictum bibendum ex. Vestibulum eu felis viverra, porta nibh eget, finibus urna. Mauris non lectus non nisl mattis tincidunt. Maecenas a tristique nisl, eget sollicitudin erat. Nulla maximus ornare velit, sed vulputate arcu commodo sit amet. Maecenas eu lorem nulla. Ut pretium sapien nec elit consequat tristique. Cras id nisl et est condimentum vestibulum in et augue. Mauris est dolor, luctus quis elementum sit amet, luctus et felis. Mauris vehicula felis vitae viverra lobortis. Nam eu sem consectetur, fringilla ipsum id, tincidunt quam. Ut lorem ipsum dolor sit diam at posuere. Nulla ut rhoncus orci. Maecenas tincidunt rutrum luctus. Sed erat ante, sodales quis rhoncus vitae, inline link. Ut odio est, lobortis quis tempus vitae, pulvinar vitae dolor. Donec dapibus lorem nec lorem porta, in laoreet nulla feugiat. Proin euismod risus tellus, in euismod turpis pulvinar non.</p>'
} %}
{# Two Column Content #}
{% include "06-components/left-aligned-submodules/la-two-column-content" with {
columns: [
{
title: 'Public Hours',
content: '<p>Fridays: 10 a.m.–5 p.m.</p><p>Saturdays: 10 a.m.–6 p.m.</p><p>Sundays: 10 a.m.–5 p.m.</p>'
},
{
title: 'Members-only hours',
content: '<p>Fridays, Saturdays, and <br />Sundays: 10 a.m.–11 a.m. </p>'
}
]
} %}
{# Two Column CTA Content #}
{% include "06-components/left-aligned-submodules/la-two-column-cta-content" with {
title: 'Discounts',
items: [
{
title: 'Access',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.',
link: '#',
},
{
title: 'STAMP',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.',
link: '#',
},
{
title: 'Philadelphia City Pass',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.',
link: '#',
},
{
title: 'The Philadelphia Pass®',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.',
link: '#',
},
{
title: 'Association of Science Technology Centers',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet.',
link: '#',
},
]
} %}
{# Callout Link #}
{% include "06-components/left-aligned-submodules/la-callout-link" with {
title: 'Become a member',
link: '#',
content: 'Your membership supports our efforts to ensure a healthy, sustainable and equitable planet. '
} %}
{# Data Table #}
{% include "06-components/left-aligned-submodules/la-data-table" with {
title: 'Academy Pricing',
items: [
{
title: 'Adults (13+)',
value: '$22.00'
},
{
title: 'Seniors (65+)',
value: '$19.00'
},
{
title: 'Military and Students (with ID)',
value: '$19.00'
},
{
title: 'Children ages 2-12',
value: '$18.00'
},
{
title: 'Children under 2',
value: 'Free'
},
{
title: 'Drexel Dragon Card',
value: 'Free'
},
{
title: 'Members',
value: 'Free'
},
]
} %}
{# WYSIWYG #}
{% include "06-components/left-aligned-submodules/la-wysiwyg" with {
content: '<p>To ensure the health and safety of our guests, staff and volunteers, we have carefully developed new health and safety protocols, following guidelines provided by the Centers for Disease Control and Prevention, the Pennsylvania Department of Health, the Philadelphia Department of Public Health, Drexel University, and in consultation with national museum organizations as well as fellow museums around the world, across the nation and in Philadelphia.</p>'
} %}
{# Accordion Group #}
{% include "06-components/left-aligned-submodules/la-accordion-group" with {
data: {
title: 'Directions',
items: [
{
title: 'Public Transit',
content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
},
{
title: 'Philly PLASH',
content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
},
{
title: 'By Car',
content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
},
{
title: 'Parking',
content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
},
]
}
} %}
{% endblock %}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"idAttr": "left-aligned-content",
"title": "Left Aligned Content",
"description": "Optional description content",
"ctaTitle": "Optional CTA",
"ctaLink": "#"
}
.c-la-content-block {
& + & {
margin-top: 6.4rem;
}
& + .c-la-accordion-content {
margin-top: 2.4rem;
}
}
No notes defined.