Academy of Natural Sciences

Page Header Career 

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

        <div class="c-career-details__col c-career-details__col--duration">
            <span class="c-career-details__icon" aria-hidden="true"><svg width="36" height="36" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 7.5V22L27.5 27.5M43 22C43 33.598 33.598 43 22 43C10.402 43 1 33.598 1 22C1 10.402 10.402 1 22 1C33.598 1 43 10.402 43 22Z" class="u-ct-stroke" stroke-width="2" stroke-linejoin="round" />

                </svg>
            </span>
            <p class="f-text--cta f-upper f-spaced"><span class="u-sr-only">Duration: </span>Full Time</p>
        </div>

        <div class="c-career-details__col c-career-details__col--location">
            <span class="c-career-details__icon" aria-hidden="true"><svg width="31" height="45" viewBox="0 0 31 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M27.9099 21.6235C24.2523 28.6627 19.8108 36.3313 15.5 43C11.1892 36.2078 6.35586 28.2922 2.82883 21.1295C1.91441 19.1536 1 16.8072 1 14.7078C1 7.1747 7.53153 1 15.5 1C23.4685 1 30 7.1747 30 14.7078C30 17.0542 28.955 19.5241 27.9099 21.6235Z" class="u-ct-stroke" stroke-width="2" />
                    <circle cx="16" cy="16" r="5" class="u-ct-stroke" stroke-width="2" />
                </svg>
            </span>
            <p class="f-text--cta f-upper f-spaced"><span class="u-sr-only">Location: </span>Philadelphia, PA</p>
        </div>

        <div class="c-career-details__col c-career-details__col--apply-by">
            <span class="c-career-details__icon" aria-hidden="true"><svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 9.38095V33H26.9048V1H9.38095M1 9.38095L9.38095 1M1 9.38095H9.38095V1" class="u-ct-stroke" stroke-width="2" />
                    <path d="M5.57031 21H22.3322" class="u-ct-stroke" stroke-width="2" />
                    <path d="M5.57031 16H22.3322" class="u-ct-stroke" stroke-width="2" />
                    <path d="M5.57031 26H16.9989" class="u-ct-stroke" stroke-width="2" />
                </svg>
            </span>
            <p class="f-text--cta f-upper f-spaced">Apply by Month, DD YYYY</p>
        </div>

        <div class="c-career-details__col c-career-details__col--phone">
            <span class="c-career-details__icon" aria-hidden="true"><svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.0039 9L17.0039 24" class="u-ct-stroke" stroke-width="2" />
                    <path d="M16 9L12 24" class="u-ct-stroke" stroke-width="2" />
                    <path d="M23.0922 19.3886L8.99931 19.4072" class="u-ct-stroke" stroke-width="2" />
                    <path d="M24.0023 13.593L9.90947 13.6115" class="u-ct-stroke" stroke-width="2" />
                    <rect x="1" y="1" width="31" height="31" class="u-ct-stroke" stroke-width="2" />
                </svg>
            </span>
            <p class="f-text--cta f-upper f-spaced">215-867-5309</p>
        </div>

    </div>
</div>
 
<div class="c-career-details o-container" data-bkg-theme="base">
  <h2 class="u-sr-only">Information</h2>
  <div class="c-career-details__row">
    {% if duration %}
      <div class="c-career-details__col c-career-details__col--duration">
        <span class="c-career-details__icon" aria-hidden="true">{% include "03-icons/clock" %}</span>
        <p class="f-text--cta f-upper f-spaced"><span class="u-sr-only">Duration: </span>{{ duration }}</p>
      </div>
    {% endif %}
    {% if location %}
      <div class="c-career-details__col c-career-details__col--location">
        <span class="c-career-details__icon" aria-hidden="true">{% include "03-icons/map-marker" %}</span>
        <p class="f-text--cta f-upper f-spaced"><span class="u-sr-only">Location: </span>{{ location }}</p>
      </div>
    {% endif %}

    {% if applyBy %}
      <div class="c-career-details__col c-career-details__col--apply-by">
        <span class="c-career-details__icon" aria-hidden="true">{% include "03-icons/file" %}</span>
        <p class="f-text--cta f-upper f-spaced">{{ applyBy }}</p>
      </div>
    {% endif %}

    {% if phone %}
      <div class="c-career-details__col c-career-details__col--phone">
        <span class="c-career-details__icon" aria-hidden="true">{% include "03-icons/phone-number" %}</span>
        <p class="f-text--cta f-upper f-spaced">{{ phone }}</p>
      </div>
    {% endif %}

  </div>
</div>
 
{
  "pageColorTheme": "teal",
  "duration": "Full Time",
  "location": "Philadelphia, PA",
  "applyBy": "Apply by Month, DD YYYY",
  "phone": "215-867-5309"
}
  • Content: 
    .c-career-details {
  margin-top: 2.4rem;
  margin-bottom: 12rem;
}

.c-career-details__row {
  display: flex;
  flex-wrap: wrap;
}

.c-career-details__col {
  display: flex;
  align-items: center;
  margin-top: 2.4rem;
  flex: 0 0 100%;
  max-width: 100%;

  @include break($xs) {
    flex: 0 0 40%;
    max-width: 40%;
    margin-right: 5%;
  }

  @include break($sm) {
    flex: 0 0 auto;
    margin-right: 5.4rem;
  }
}

.c-career-details__icon {
  margin-right: 1.5rem;
}
  • URL: /components/raw/page-header-career/page-header-career.scss
  • Filesystem Path: patterns\06-components\page-header-career\page-header-career.scss
  • Size: 509 Bytes

No notes defined.