diff --git a/src/patterns/04-components/card/card-elements/_additional-info.twig b/src/patterns/04-components/card/card-elements/_additional-info.twig
new file mode 100644
index 0000000000000000000000000000000000000000..364c8ba1b37d0463e4bd47b67d8812cb42e7066b
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_additional-info.twig
@@ -0,0 +1,45 @@
+<div class="card__additional-info">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ } %}
+ {% block details_summary %}
+ Additional Information
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if additional_info.host %}
+ <span class="uw-label">Host:</span>
+ {% include '@components/links/links.twig' with {
+ 'links': additional_info.host
+ } %}
+ {% endif %}
+
+ {% if additional_info.event_website %}
+ <span class="uw-label">Event website:</span>
+ {% include '@components/links/links.twig' with {
+ 'links': additional_info.event_website
+ } %}
+ {% endif %}
+
+ {% if additional_info.cost %}
+ <span class="uw-label">Cost:</span>
+ {{ additional_info.cost }}
+ {% endif %}
+
+ {% if additional_info.tags %}
+ {% for key,tag in additional_info.tags %}
+ <span class="uw-label">{{ key }}:</span>
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: tag
+ } %}
+ {% endfor %}
+ {% endif %}
+
+ {% if additional_info.info %}
+ {{ additional_info.info }}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_banner.twig b/src/patterns/04-components/card/card-elements/_banner.twig
new file mode 100644
index 0000000000000000000000000000000000000000..450b126ca3443a49b9037deb754cfb1753283648
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_banner.twig
@@ -0,0 +1,39 @@
+<div class="card__banner--image">
+ {% if image.link %}
+ <a href="{{ image.link }}">
+ {% endif %}
+ <div class="card__banner--media">
+ {% if listing_image.img_element %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: listing_image.img_element,
+ alt: listing_image.alt
+ }%}
+ {% else %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: image.img_element,
+ alt: image.alt
+ }%}
+ {% endif %}
+ </div>
+ {% if image.big_text or image.small_text %}
+ <div class="card__banner--caption">
+ {% if image.big_text %}
+ <strong>
+ <span class="card__banner--title">
+ {{ image.big_text }}
+ </span>
+ {% endif %}
+ </strong>
+ {% if image.small_text %}
+ <span class="card__banner--sub-title">
+ {{ image.small_text }}
+ </span>
+ {% endif %}
+ </div>
+ {% endif %}
+ {% if image.link %}
+ </a>
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_contact-for.twig b/src/patterns/04-components/card/card-elements/_contact-for.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3c981fa14b003644bc7314c63c3e8b78033ad7d3
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_contact-for.twig
@@ -0,0 +1,15 @@
+<div class="card__contact-for">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Contact for
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__contact-for-content">
+ {{ contact_for.contact }}
+ </div>
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_employment_type.twig b/src/patterns/04-components/card/card-elements/_employment_type.twig
new file mode 100644
index 0000000000000000000000000000000000000000..08ec08cb19840fabc395ded084499e2bf8922c30
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_employment_type.twig
@@ -0,0 +1,6 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Employment type'
+} %}
+{% include "@components/tag-list/tag-list.twig" with {
+ items: employment_type
+} %}
diff --git a/src/patterns/04-components/card/card-elements/_groups.twig b/src/patterns/04-components/card/card-elements/_groups.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1434e9aecaeb8c423daab3d15dae765bbc85caf7
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_groups.twig
@@ -0,0 +1,21 @@
+<div class="card__groups">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Groups
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__groups-list">
+ {% for group in groups %}
+ {% if loop.index0 > 0 %}
+ , {{ group.title }}
+ {% else %}
+ {{ group.title }}
+ {% endif %}
+ {% endfor %}
+ </div>
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_image.twig b/src/patterns/04-components/card/card-elements/_image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0b4be901b6f37ad44ff6261e9a6b49e0af6e4ce9
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_image.twig
@@ -0,0 +1,15 @@
+<div class="card__image">
+ {% if image.type == 'listing_image' %}
+ {% include '@components/card/card-elements/_listing-image.twig' with {
+ 'listing_image': image
+ } %}
+ {% endif %}
+
+ {% if image.type == 'portrait' %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: image.img_element,
+ alt: image.alt
+ }%}
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_job.id.twig b/src/patterns/04-components/card/card-elements/_job.id.twig
new file mode 100644
index 0000000000000000000000000000000000000000..68af3ffaedd08ccaf9408a4d29f089c84c1584f7
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_job.id.twig
@@ -0,0 +1,4 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Job id'
+} %}
+{{ job_id }}
diff --git a/src/patterns/04-components/card/card-elements/_listing-image.twig b/src/patterns/04-components/card/card-elements/_listing-image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..be9cae0c2545c10c79ba17ddabbcf98433107d33
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_listing-image.twig
@@ -0,0 +1,13 @@
+{% if url %}
+ <a href="{{ url }}">
+{% endif %}
+
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: listing_image.sources,
+ img_element: listing_image.img_element,
+ alt: listing_image.alt
+ }%}
+
+{% if url %}
+ </a>
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_location-info.twig b/src/patterns/04-components/card/card-elements/_location-info.twig
new file mode 100644
index 0000000000000000000000000000000000000000..67453d1ffa682df74fde8cf7a4c354cb46537869
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_location-info.twig
@@ -0,0 +1,45 @@
+{% set address = location_info.address %}
+{% set map = location_info.map %}
+{% set map_link = location_info.map_link %}
+
+<div class="card__location">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Location Information
+ {% endblock %}
+
+ {% block details_content %}
+ {% if address %}
+ <div class="card__address">
+ <span class="uw-label">Location Address:</span>
+ {% if address.organization %}
+ {{ address.organization }}<br />
+ {% endif %}
+ {% if address.address_line1 %}
+ {{ address.address_line1 }}<br />
+ {% endif %}
+ {% if address.address_line2 %}
+ {{ address.address_line2 }}<br />
+ {% endif %}
+ {% if address.locality or address.administrative_area or address.country_code or address.postal_code %}
+ {% if address.locality %}{{ address.locality }}{% if address.administrative_area %}, {% endif %}{% endif %}{% if address.administrative_area %}{{ address.administrative_area }}{% endif %}{% if address.country_code and (address.locality or address.administrative_area) %}, {% endif %}{% if address.country_code %}{{ address.country_code }}{% endif %}{% if address.postal_code and (address.locality or address.administrative_area or address.country_code) %} {% endif %}{% if address.postal_code %}{{ address.postal_code }}{% endif %}
+ {% endif %}
+ </div>
+ {% endif %}
+ {% if map %}
+ <div class="card__map">
+ <span class="uw-label">Location coordinates:</span>
+ {{ map }}
+ </div>
+ {% endif %}
+ {% if map_link %}
+ <div class="card__map-link">
+ <span class="uw-label"> Link to map:</span>
+ <a href="{{ map_link.uri }}">{{ map_link.uri }}</a>
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_opportunity-dates.twig b/src/patterns/04-components/card/card-elements/_opportunity-dates.twig
new file mode 100644
index 0000000000000000000000000000000000000000..504fb4494ca83a0b50e6d30be3bc97ee0166e963
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_opportunity-dates.twig
@@ -0,0 +1,53 @@
+<div class="card__opportunity-dates">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Dates
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if dates.posted %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Date posted'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': dates.posted
+ } %}
+ {% endif %}
+
+ {% if dates.deadline %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Application deadline'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long_with_time',
+ 'date': dates.deadline
+ } %}
+ {% endif %}
+
+ {% if dates.start_date %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Start date'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': dates.start_date
+ } %}
+ {% endif %}
+
+ {% if dates.end_date %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'End date'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': dates.end_date
+ } %}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_opportunity-details.twig b/src/patterns/04-components/card/card-elements/_opportunity-details.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7607ff58d67686049d04c6e9b89f70119ad3a13d
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_opportunity-details.twig
@@ -0,0 +1,35 @@
+<div class="card__opportunity-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Details
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if opportunity_details.posted_by %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Posted by (department/office)'
+ } %}
+ {{ opportunity_details.posted_by }}
+ {% endif %}
+
+ {% if opportunity_details.number_of_positions %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Number of positions'
+ } %}
+ {{ opportunity_details.number_of_positions }}
+ {% endif %}
+
+ {% if opportunity_details.reports_to %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Reports to'
+ } %}
+ {{ opportunity_details.reports_to }}
+ {% endif %}
+
+ {% endblock %}
+
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_opportunity-type.twig b/src/patterns/04-components/card/card-elements/_opportunity-type.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4a28ef794f897d3e4b10523dc081bd24dba8c922
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_opportunity-type.twig
@@ -0,0 +1,6 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Opportunity type'
+} %}
+{% include "@components/tag-list/tag-list.twig" with {
+ items: opportunity_type
+} %}
diff --git a/src/patterns/04-components/card/card-elements/_portrait.twig b/src/patterns/04-components/card/card-elements/_portrait.twig
new file mode 100644
index 0000000000000000000000000000000000000000..86bf32afd5fd7f2c789f59c8c836bc54b000087a
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_portrait.twig
@@ -0,0 +1,3 @@
+<div class="card__portrait">
+ <img src="{{ image.uri }}" alt="{{ image.alt }}" />
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_project-details.twig b/src/patterns/04-components/card/card-elements/_project-details.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9c06b2adfc9c11669fee84ea466f073ecae0f604
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_project-details.twig
@@ -0,0 +1,33 @@
+{% if project_details | length > 0 %}
+ <div class="card__project-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Project details
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__project-details--status">
+ {% include '@components/label/label.twig' with {
+ 'label': 'Status'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: project_details.status
+ } %}
+ </div>
+
+ {% if project_details.topics %}
+ <div class="card__project-details--topics">
+ {% include '@components/label/label.twig' with {
+ 'label': 'Topics'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: project_details.topics
+ } %}
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% endembed %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_project-members.twig b/src/patterns/04-components/card/card-elements/_project-members.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0ca7450921cd0e5f65a65873b0e98d9b198c9e38
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_project-members.twig
@@ -0,0 +1,39 @@
+{% if project_members | length > 0 %}
+ <div class="card__project-members">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Project members
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__project-members--content">
+ {% for member in project_members %}
+ <div class="card__project-member">
+ {% if member.link %}
+ <a href="{{ member.link }}">
+ {% endif %}
+
+ {% if member.roles %}
+ {% set roles = '' %}
+ {% for role in member.roles %}
+ {% if loop.index0 > 0 %}
+ {% set roles = roles ~ ', ' %}
+ {% endif %}
+ {% set roles = roles ~ role.title %}
+ {% endfor %}
+ {{ member.name }} ({{ roles }})
+ {% else %}
+ {{ member.name }}
+ {% endif %}
+ {% if member.link %}
+ </a>
+ {% endif %}
+ </div>
+ {% endfor %}
+ </div>
+ {% endblock %}
+ {% endembed %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_rate-of-pay.twig b/src/patterns/04-components/card/card-elements/_rate-of-pay.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e7ad547440e923f6e0e97391752b79b921fde3d3
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_rate-of-pay.twig
@@ -0,0 +1,10 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Rate of pay'
+} %}
+{% if rate_of_pay and rate_of_pay_type %}
+ {{ rate_of_pay }} ({{ rate_of_pay_type[0].title }})
+{% elseif rate_of_pay_type %}
+ {{ rate_of_pay_type }}
+{% else %}
+ {{ rate_of_pay }}
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_service-details.twig b/src/patterns/04-components/card/card-elements/_service-details.twig
new file mode 100644
index 0000000000000000000000000000000000000000..160b6c0dff56d16b4a99723d0ec9b9c4e21c6c51
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_service-details.twig
@@ -0,0 +1,72 @@
+<div class="card__service-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE
+ } %}
+ {% block details_summary %}
+ Service Details
+ {% endblock %}
+
+ {% block details_content %}
+ {% if service_details.popularity %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Popularity'
+ } %}
+ {{ service_details.popularity }}
+ {% endif %}
+
+ {% if service_details.use_service %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'What can use this service'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: service_details.use_service
+ } %}
+ {% endif %}
+
+ {% if service_details.whats_available %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'What\'s available'
+ } %}
+ {% for wa in service_details.whats_available %}
+ {{ wa }}<br />
+ {% endfor %}
+ {% endif %}
+
+ {% if service_details.request_service %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'How to request this service'
+ } %}
+ {{ service_details.request_service }}
+ {% endif %}
+
+ {% if service_details.minimum_notice %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Minimum notice to use this service'
+ } %}
+ {{ service_details.minimum_notice }}
+ {% endif %}
+
+ {% if service_details.average_length %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Average length of time to complete request'
+ } %}
+ {{ service_details.average_length }}
+ {% endif %}
+
+ {% if service_details.pricing_cost %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Pricing/Cost'
+ } %}
+ {{ service_details.pricing_cost }}
+ {% endif %}
+
+ {% if service_details.support %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Support for this service'
+ } %}
+ {{ service_details.support }}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_service-hours.twig b/src/patterns/04-components/card/card-elements/_service-hours.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6fc3e11f174d834a7e066adf014171321519a875
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_service-hours.twig
@@ -0,0 +1,24 @@
+<div class="card__service-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE
+ } %}
+ {% block details_summary %}
+ Service Hours
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if service_hours.hours %}
+ {{ service_hours.hours }}
+ {% endif %}
+
+ {% if service_hours.hours_notes %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'General notes about service hours'
+ } %}
+ {{ service_hours.hours_notes }}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_service-information.twig b/src/patterns/04-components/card/card-elements/_service-information.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9105935ddd369e2c4674b963d02b1b552b6c098f
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_service-information.twig
@@ -0,0 +1,29 @@
+<div class="card__service-information">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE
+ } %}
+ {% block details_summary %}
+ Service Information
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if info.status %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Status'
+ } %}
+ {{ info.status }}
+ {% endif %}
+
+ {% if info.categories %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Categories'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: info.categories
+ } %}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_timeline.twig b/src/patterns/04-components/card/card-elements/_timeline.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3d702b0ba1f7488ee3393d5324752f17ac227e1f
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_timeline.twig
@@ -0,0 +1,23 @@
+<div class="card__timeline">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Project time line
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__timeline--content">
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'standard',
+ 'date': timeline.start_date,
+ } %}
+ to
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'standard',
+ 'date': timeline.end_date,
+ } %}
+ </div>
+ {% endblock %}
+ {% endembed %}
+</div>