<div class="c-event-details o-container" data-bkg-theme="base">
    <h2 class="u-sr-only">Information</h2>
    <div class="o-row c-event-details__row">

        <div class="c-event-details__col c-event-details__col--dates o-col o-col-xs-6 o-col-md-3">
            <h3 class="u-sr-only">Dates</h3>
            <div class="c-event-details__icon" aria-hidden="true">
                <svg width="38" height="43" viewBox="0 0 38 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 5.14307H37V41.1431H1V5.14307Z" class="u-ct-stroke--dark" stroke-width="2" />
                    <path d="M11.2856 0V9" class="u-ct-stroke--dark" stroke-width="2" />
                    <path d="M26.7139 0V9" class="u-ct-stroke--dark" stroke-width="2" />
                    <path d="M1 17.3569H37" class="u-ct-stroke--dark" stroke-width="2" />
                </svg>

            </div>
            <div class="c-event-details__content">

                <p class="f-text--small c-event-details__date"><strong>Wednesday, September 22, 2021</strong>

                    <br />4 p.m. – 5 p.m.

                </p>

            </div>
        </div>

        <div class="c-event-details__col c-event-details__col--cta o-col o-col-xs-6 o-col-md-3">
            <div class="c-event-details__cta">
                <a href="#" class="o-btn o-btn--primary" target="blank">Reserve Tickets</a>
            </div>
        </div>

    </div>
    <div class="o-row">
        <div class="o-col">
            <div class="c-event-details__sep"></div>
        </div>
    </div>
</div>
<div class="c-event-details o-container" data-bkg-theme="base">
  <h2 class="u-sr-only">Information</h2>
  <div class="o-row c-event-details__row">

    <div class="c-event-details__col c-event-details__col--dates o-col o-col-xs-6 o-col-md-3">
      <h3 class="u-sr-only">Dates</h3>
      <div class="c-event-details__icon" aria-hidden="true">
        {% include "03-icons/calendar-event" %}
      </div>
      <div class="c-event-details__content">
        {% for date in dates %}
          {% if loop.index < 4 %}
            <p class="f-text--small c-event-details__date"><strong>{{ date.day }}</strong>
              {% for time in date.times %}
                <br />{{ time }}
              {% endfor %}
            </p>
          {% endif %}
        {% endfor %}
        {% if dates|length > 3 %}
          {% embed "04-objects/accordion" with {
            buttonClasses: 'o-btn',
            classes: 'c-event-details__accordion',
            btnAfter: true
          } %}
            {% block buttonContent %}
              <span class="f-text--cta c-event-details__accordion-text c-event-details__accordion-text--closed">
                View All Dates
                <span class="c-event-details__accordion-icon" aria-hidden="true">
                  {% include "03-icons/plus" %}
                </span>
              </span>
              <span class="f-text--cta c-event-details__accordion-text c-event-details__accordion-text--open">
                View Less Dates
                <span class="c-event-details__accordion-icon" aria-hidden="true">
                  {% include "03-icons/minus" %}
                </span>
              </span>
            {% endblock buttonContent %}
            {% block accordionContent %}
              {% for date in dates %}
                {% if loop.index > 3 %}
                  <p class="f-text--small c-event-details__date"><strong>{{ date.day }}</strong><br />{{ date.time }}</p>
                {% endif %}
              {% endfor %}
            {% endblock accordionContent %}

          {% endembed %}
        {% endif %}
      </div>
    </div>

    {% if location.title or location.address_line_one or location.address_line_two %}
      <div class="c-event-details__col c-event-details__col--location o-col o-col-xs-6 o-col-md-3">
        <h3 class="u-sr-only">Location</h3>
        <div class="c-event-details__icon" aria-hidden="true">
          {% include "03-icons/location-event" %}
        </div>
        <div class="c-event-details__content">
          <p class="f-text--small c-event-details__location"><strong>{{ location.title }}</strong>
            {% if location.address_line_one %}<br />{{ location.address_line_one }}{% endif %}
            {% if location.address_line_two %}<br />{{ location.address_line_two }}{% endif %}
          </p>
        </div>
      </div>
    {% endif %}

    {% if cost %}
      <div class="c-event-details__col c-event-details__col--cost o-col o-col-xs-6 o-col-md-3">
        <h3 class="u-sr-only">Cost</h3>
        <div class="c-event-details__icon" aria-hidden="true">
          {% include "03-icons/dollar-event" %}
        </div>
        <div class="c-event-details__content">
          {% for item in cost %}
            <p class="f-text--small c-event-details__cost"><strong>{{ item.title }}{% if item.amount %}:{% endif %}</strong>
              {% if item.amount %}${{ item.amount }}{% endif %}
            </p>
          </p>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {% if ctaLink %}
      {% set ctaText = ctaTitle is defined ? ctaTitle : 'Register' %}
      <div class="c-event-details__col c-event-details__col--cta o-col o-col-xs-6 o-col-md-3">
        <div class="c-event-details__cta">
          <a href="{{ ctaLink }}" class="o-btn o-btn--primary" target="blank">{{ ctaText }}</a>
        </div>
      </div>
    {% endif %}
  </div>
  <div class="o-row">
    <div class="o-col">
      <div class="c-event-details__sep"></div>
    </div>
  </div>
</div>
{
  "pageColorTheme": "teal",
  "dates": [
    {
      "day": "Wednesday, September 22, 2021",
      "times": [
        "4 p.m. – 5 p.m."
      ]
    }
  ],
  "location": false,
  "cost": false,
  "ctaTitle": "Reserve Tickets",
  "ctaLink": "#"
}
  • Content:
    .c-event-details {
      margin-top: 5rem;
      margin-bottom: 8rem;
    }
    
    // .c-event-details__row {
    //   width: 100%;
    // }
    
    .c-event-details__sep {
      margin-top: 5rem;
      border-bottom: 0.1rem solid var(--ct-dark);
    }
    
    .c-event-details__col {
      display: flex;
      margin-top: 2.4rem;
    
      @include break($xs) {
        margin-top: 0;
      }
    
      &:nth-child(n+3) {
    
        @include break($xs) {
          margin-top: 2.4rem;
        }
    
        @include break($md) {
          margin-top: 0;
        }
      }
    
      &:first-child {
        margin-top: 0;
      }
    }
    
    .c-event-details__icon {
      padding-right: 2.4rem;
    
      svg {
        display: block;
      }
    }
    
    .c-event-details__content {
      padding-top: 0.8rem;
    }
    
    .c-event-details__col--cta {
      justify-content: center;
    
      @include break($xs) {
        margin-left: auto;
        justify-content: flex-start;
      }
    
      @include break($md) {
        justify-content: flex-end;
      }
    }
    
    .c-event-details__cta {
      width: 100%;
    
      @include break($xs) {
        width: auto;
      }
    
      .o-btn {
        width: 100%;
        justify-content: center;
    
        @include break($xs) {
          width: auto;
        }
      }
    }
    
    .c-event-details__date {
    
      & + & {
        margin-top: 0.8rem;
      }
    }
    
    .c-event-details__accordion {
    
      .o-accordion__button {
        margin-top: 0.8rem;
      }
    
      .c-event-details__date {
        margin-top: 0.8rem;
      }
    }
    
    .c-event-details__accordion-text {
      color: var(--ct-dark);
      display: inline-flex;
    }
    
    .c-event-details__accordion-text--open {
      display: none;
    
      .is-open & {
        display: block;
      }
    }
    
    .c-event-details__accordion-text--closed {
    
      .is-open & {
        display: none;
      }
    }
    
    .c-event-details__accordion-icon {
      margin-left: 0.8rem;
    }
    
  • URL: /components/raw/page-header-event-details/page-header-event-details.scss
  • Filesystem Path: patterns\06-components\page-header-event-details\page-header-event-details.scss
  • Size: 1.7 KB

No notes defined.