Academy of Natural Sciences

Careers List 

<div class="c-careers-list o-container" data-bkg-theme="base">
    <h2 id="careers-list413" class="u-sr-only">Career Opportunities</h2>
    <ul class="c-careers-list__items" aria-labelledby="careers-list413">

        <li class="c-careers-list__item">
            <a href="" class="c-careers-list__item-content">
                <h3 class="c-careers-list__item-title f-title--h6">
                    <span class="u-hover-drawline">Executive Director of The Environmental Collaboratory</span>
                </h3>
                <p class="c-careers-list__item-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis, augue in viverra porta, massa diam egestas nisl, a tempus orci augue ut risus.</p>
                <span class="c-careers-list__item-cta" 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>
            <div class="c-careers-list__item-details">

                <div class="c-careers-list__item-detail">
                    <span class="c-careers-list__item-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-careers-list__item-detail">
                    <span class="c-careers-list__item-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>
        </li>

        <li class="c-careers-list__item">
            <a href="" class="c-careers-list__item-content">
                <h3 class="c-careers-list__item-title f-title--h6">
                    <span class="u-hover-drawline">Visitor Services Associate</span>
                </h3>
                <p class="c-careers-list__item-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis, augue in viverra porta, massa diam egestas nisl, a tempus orci augue ut risus.</p>
                <span class="c-careers-list__item-cta" 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>
            <div class="c-careers-list__item-details">

                <div class="c-careers-list__item-detail">
                    <span class="c-careers-list__item-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>Part Time</p>
                </div>

                <div class="c-careers-list__item-detail">
                    <span class="c-careers-list__item-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>Remote</p>
                </div>

            </div>
        </li>

    </ul>

</div>
 
{% set hID = 'careers-list' ~ random(5000) %}

<div class="c-careers-list o-container" data-bkg-theme="base">
  <h2 id="{{ hID }}" class="u-sr-only">{{ title }}</h2>
  <ul class="c-careers-list__items" aria-labelledby="{{ hID }}">
    {% for item in items %}
      <li class="c-careers-list__item">
        <a href="{{ item.link }}" class="c-careers-list__item-content">
          <h3 class="c-careers-list__item-title f-title--h6">
            <span class="u-hover-drawline">{{ item.title }}</span>
          </h3>
          <p class="c-careers-list__item-description f-text--small">{{ item.description }}</p>
          <span class="c-careers-list__item-cta" aria-hidden="true">
            {% include "03-icons/cta-expanding-arrow" %}
          </span>
        </a>
        <div class="c-careers-list__item-details">
          {% if item.duration %}
            <div class="c-careers-list__item-detail">
              <span class="c-careers-list__item-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>{{ item.duration }}</p>
            </div>
          {% endif %}
          {% if item.location %}
            <div class="c-careers-list__item-detail">
              <span class="c-careers-list__item-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>{{ item.location }}</p>
            </div>
          {% endif %}
        </div>
      </li>
    {% endfor %}
  </ul>


</div>
 
{
  "pageColorTheme": "teal",
  "title": "Career Opportunities",
  "items": [
    {
      "title": "Executive Director of The Environmental Collaboratory",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis, augue in viverra porta, massa diam egestas nisl, a tempus orci augue ut risus.",
      "duration": "Full Time",
      "location": "Philadelphia, PA"
    },
    {
      "title": "Visitor Services Associate",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis, augue in viverra porta, massa diam egestas nisl, a tempus orci augue ut risus.",
      "duration": "Part Time",
      "location": "Remote"
    }
  ]
}
  • Content: 
    .c-careers-list {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.c-careers-list__item {
  padding: 5.2rem 6.4rem;
  background: $c-charcoal-light;

  @include break($sm) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  & + & {
    margin-top: 4rem;
  }
}

.c-careers-list__item-content {
  display: block;

  @include break($sm) {
    flex: 0 0 55%;
    max-width: 55%;
  }
}

.c-careers-list__item-description {
  margin-top: 1rem;
  max-width: 57rem;
}

.c-careers-list__item-cta {
  display: block;
  margin-top: 3.2rem;
  @include ctaArrowHover;
}


.c-careers-list__item-details {
  margin-top: 3.2rem;
  @include break($sm) {
    margin-top: 0;
    flex: 1;
    margin-left: 25%;
  }
}

.c-careers-list__item-detail {
  display: flex;
  align-items: center;

  & + & {
    margin-top: 3.2rem;
  }
}

.c-careers-list__item-icon {
  width: 6rem;
  margin-right: 1.2rem;

  svg {
    display: block;
    margin: 0 auto;
  }
}
  • URL: /components/raw/careers-list/careers-list.scss
  • Filesystem Path: patterns\06-components\careers-list\careers-list.scss
  • Size: 1 KB

No notes defined.