diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index fecd07b624d160225a86c13b211bdbdc0095be4a..4433ed6b1dbb539f925458bcb870eab8079b4731 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -14,6 +14,7 @@
@forward 'content-grid-list/content-grid-list';
@forward 'copy-text/copy-text';
@forward 'date/date';
+@forward 'exp_col_block/exp-col-block';
@forward 'filters/filters';
@forward 'icon/icon';
@forward 'icon/icon--button/icon--button';
diff --git a/src/patterns/04-components/exp_col_block/_exp-col-block.scss b/src/patterns/04-components/exp_col_block/_exp-col-block.scss
new file mode 100644
index 0000000000000000000000000000000000000000..34bea0ef081043d3c7ea80907894749f1f7c7bc6
--- /dev/null
+++ b/src/patterns/04-components/exp_col_block/_exp-col-block.scss
@@ -0,0 +1,365 @@
+@use '../../01-core' as *;
+
+@each $faculty, $colour in $faculties_colours {
+
+ // Wrapping the element with this class, <body>.
+ .#{$faculty} {
+
+ // If the UW branding group
+ @if $faculty == org-default {
+ .uw-exp-col{
+ &__button{
+ &[data-type="expand-all"] {
+ background: var(--gray-2);
+ border-right: var(--size-xs) solid var(--gray-4);
+ color: var(--gray-6);
+ }
+
+ &[data-type="collapse-all"] {
+ background: var(--gray-2);
+ color: var(--gray-6);
+ }
+ &:hover,
+ &:focus {
+ outline: none;
+
+ &[data-type="expand-all"] {
+ background: var(--gray-6);
+ color: var(--gray-2);
+ }
+
+ &[data-type="collapse-all"] {
+ background: var(--gray-6);
+ color: var(--gray-2);
+ }
+ }
+ }
+
+ .uw-details{
+ .details__summary {
+ @include svg-background(mobile-arrow-down);
+ background-color: var(--gray-2);
+ h2, h3, h4, h5, h6 {
+ color: var(--gray-6);
+ }
+ &:hover,
+ &:focus {
+ @include svg-background(mobile-arrow-down-w);
+ background-color: var(--gray-6);
+ h2,h3,h4,h5,h6 {
+ color: var(--uw-white);
+ }
+ }
+ }
+
+ &[open] {
+ > .details__summary {
+ @include svg-background(mobile-arrow-up);
+ background-color: var(--gray-2);
+ h2,h3,h4,h5,h6 {
+ color: var(--gray-6);
+ }
+
+ &:focus {
+ @include svg-background(mobile-arrow-up-w);
+ background-color: var(--gray-6);
+ h2,h3,h4,h5,h6 {
+ color: var(--uw-white);
+ }
+ }
+
+ &:hover {
+ @include svg-background(mobile-arrow-up-w);
+ background-color: var(--gray-6);
+ h2,h3,h4,h5,h6{
+ color: var(--uw-white);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ } // Else run the loop on the faculties.
+ @else {
+ .uw-exp-col{
+ &__button{
+ &[data-type="expand-all"] {
+ background: var(--#{$colour}-primary);
+ border-right: var(--size-xs) solid var(--uw-white);
+ color:var(--uw-white);
+ }
+
+ &[data-type="collapse-all"] {
+ background: var(--#{$colour}-primary);
+ color: var(--uw-white);
+ }
+
+ &:hover,
+ &:focus {
+ outline: none;
+
+ &[data-type="expand-all"] {
+ background-color: var(--uw-white);
+ color: var(--#{$colour}-primary);
+ }
+
+ &[data-type="collapse-all"] {
+ background-color: var(--uw-white);
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+
+ .uw-details{
+ .details__summary {
+ background-image: inherit;
+ }
+ .details__summary {
+ background-color: var(--#{$colour}-primary);
+
+ h2, h3, h4, h5, h6 {
+ color: var(--uw-white);
+ }
+
+ &::after {
+ @include svg-background-color(var(--uw-white), mobile-arrow-down);
+ }
+
+ &:hover,
+ &:focus {
+ background-color: var(--uw-white);
+ &::after{
+ @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+ }
+ h2, h3, h4, h5, h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+ }
+
+ .uw-details[open] {
+
+ .details__summary {
+ background-image: inherit;
+ }
+
+ > .details__summary {
+ background-color: var(--#{$colour}-primary);
+
+ h2, h3, h4, h5, h6 {
+ color: var(--uw-white);
+ }
+
+ &::after {
+ @include svg-background-color(var(--uw-white), mobile-arrow-up);
+ }
+ }
+
+ &:focus {
+ .details__summary {
+ background-image: inherit;
+ }
+
+ .details__summary {
+ background-color: var(--uw-white);
+
+ &::after {
+ @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
+ }
+
+ h2, h3, h4, h5, h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+
+ &:focus-within {
+ .details__summary {
+ background-image:inherit;
+ }
+ .details__summary {
+ background-color: var(--uw-white);
+
+ &::after {
+ @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
+ }
+
+ h2, h3, h4, h5, h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+
+ &:hover {
+ .details__summary {
+ background-color: var(--uw-white);
+
+ &::after {
+ @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
+ }
+
+ h2, h3, h4, h5, h6 {
+ color: var(--#{$colour}-primary);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.uw-exp-col {
+ -webkit-font-smoothing: antialiased;
+
+ &__operations {
+ list-style-type: none;
+ margin: 0;
+ padding: var(--size-2) 0 0;
+
+ li {
+ display: inline-block;
+ }
+ }
+
+ &___group-info,
+ &__heading-selector,
+ &__heading-text {
+ display: inline-block;
+ }
+
+ &__heading-selector {
+ .form-select {
+ display: inline-block;
+ width: 82%;
+ }
+ }
+
+ &__group-info,
+ &__heading-text {
+ .ui-dialog & {
+ input[size="60"] {
+ display: inline-block;
+ }
+ }
+ }
+
+ &__table {
+ td {
+ vertical-align: top;
+ }
+ }
+
+ &__controls {
+ border: 1px solid var(--gray-2);
+ display: grid;
+ grid-template-columns: 50% 50%;
+ margin-bottom: var(--size-sm);
+
+ .no-js & {
+ display: none;
+ }
+
+ .no-js.js &,
+ .js & {
+ display: grid;
+ }
+ }
+
+ &__button {
+ font-size: var(--font-size-1);
+ font-weight: 400;
+ margin: 0;
+ max-width: inherit;
+
+ &--controls {
+ text-align: center;
+ }
+ }
+
+ .uw-details {
+ border: inherit;
+ margin-bottom: var(--size-2);
+ margin-top: inherit;
+
+ .details__summary {
+ background-image: inherit;
+ border: var(--size-xs) solid var(--gray-2);
+ padding: 0;
+ position: relative;
+ text-shadow: inherit;
+ transition: background-color 0.2s ease-in-out;
+
+ &::after {
+ content: '';
+ display: block;
+ height: var(--size-2);
+ position: absolute;
+ right: var(--size-2);
+ top:calc(50% - 0.5rem);
+ width: var(--size-2);
+ }
+
+ h2,h3,h4,h5,h6 {
+ font-family: var(--font-condensedbook);
+ // All headers currently set to same size
+ font-size: var(--font-size-1);
+ font-weight: var(--font-weight-400);
+ letter-spacing: var(--font-letterspacing-2);
+ line-height: var(--font-lineheight-4);
+ margin: 0;
+ padding: var(--size-2) 2.75rem var(--size-2) var(--size-2);
+ text-transform: uppercase;
+ }
+ }
+ }
+ .details__content {
+ background-color: var(--gray-1);
+ padding: var(--size-2);
+
+ .layout {
+ padding: 0;
+ }
+
+ .block {
+ margin-bottom: var(--size-2);
+ }
+ }
+
+}
+
+.uw-exp-col__group-info {
+ .form-type-entity-autocomplete {
+ display: inline-block;
+ width: 90%;
+ }
+}
+
+/* stylelint-disable selector-max-id, declaration-no-important */
+#drupal-modal {
+ .uw-content-moderation {
+ display: none;
+ }
+}
+/* stylelint-enable selector-max-id, declaration-no-important */
+
+.layout-builder{
+ &__section [data-expand-collapse-group],
+ &__section [data-expand-collapse-header] {
+ margin-top: var(--size-5) !important;
+ position: relative;
+ &:first-of-type {
+ &::before {
+ background: #195c8f;
+ padding: var(--size-05) var(--size-2);
+ top: -0.5rem;
+ }
+ }
+ }
+
+ &.layout__region{
+ outline: var(--size-sm) dashed #195c8f;
+ }
+}
diff --git a/src/patterns/04-components/exp_col_block/exp-col-block.js b/src/patterns/04-components/exp_col_block/exp-col-block.js
new file mode 100644
index 0000000000000000000000000000000000000000..de4466dc71043fecaa75568c53ac270212868226
--- /dev/null
+++ b/src/patterns/04-components/exp_col_block/exp-col-block.js
@@ -0,0 +1,33 @@
+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+ 'use strict';
+ Drupal.behaviors.expcol = {
+ attach: function () {
+ $(document).ready(function () {
+
+ $('.uw-exp-col').each(function () {
+
+ // The id selector for the exp/col.
+ var idSelector = '#' + $(this).attr('id');
+
+ // Open all the details for the clicked E/C.
+ $(idSelector + ' button[data-type="expand-all"]').click(function () {
+ $(idSelector + ' details').each(function () {
+ $(this).attr('open', 'TRUE');
+ });
+ });
+
+ // Close all the details for the clicked E/C.
+ $(idSelector + ' button[data-type="collapse-all"]').click(function () {
+ $(idSelector + ' details').each(function () {
+ $(this).removeAttr('open');
+ });
+ });
+ });
+ });
+ }
+ };
+})(jQuery, Drupal);
diff --git a/src/patterns/04-components/exp_col_block/exp_col_block.twig b/src/patterns/04-components/exp_col_block/exp_col_block.twig
new file mode 100644
index 0000000000000000000000000000000000000000..af5b6a087093488cbb2806531a7830120287b35e
--- /dev/null
+++ b/src/patterns/04-components/exp_col_block/exp_col_block.twig
@@ -0,0 +1,21 @@
+{% if exp_col.items|length > 0 %}
+ <div id="{{ exp_col.uuid }}" class="uw-exp-col">
+ {% if exp_col.show_exp_col_all %}
+ <div class="uw-exp-col__controls">
+ <button class="uw-exp-col__button uw-exp-col__button--controls" data-type="expand-all">Expand All</button>
+ <button class="uw-exp-col__button uw-exp-col__button--controls" data-type="collapse-all">Collapse All</button>
+ </div>
+ {% endif %}
+
+ {% for ec in exp_col.items %}
+ <details class="uw-details">
+ <summary class="details__summary">
+ <{{ exp_col.heading_selector }}>{{ ec.heading_text }}</{{ exp_col.heading_selector }}>
+ </summary>
+ <div class="details__content">
+ {{ ec.content }}
+ </div>
+ </details>
+ {% endfor %}
+ </div>
+{% endif %}