EBP - Job HTML

career-list.css

.career-list {
  background-color: transparent;
}

.career-list .career-list__item {
  color: #333;
}

.career-list__item {
  padding: 12px;
  display: flex;
  position: relative;
  font-size: 14px;
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", "Helvetica Neue", Arial, Sans-Serif;
  color: #333;
}

.career-list__item svg {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  
  right: 10px;
  width: 5px;
  height: 13px;
  fill: #968782;
}

@media (min-width: 992px) {
  .career-list__item {
    font-size: 20px;
  }
}

.career-list__item:nth-child(odd) {
  background-color: #F6F4F4;
}

.career-list__item:hover {
  background-color: #AF2832;
  color: #fff;
}

.career-list__item:hover svg {
  fill: #fff;
}

.career-list__item-title {
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}

.career-list__item-percentage {
  float: right;
  padding: 0 20px 0 0;
}

career-list.html

<div class="career-list">
    <a class="career-list__item" href="/jobs/job">
        <span class="career-list__item-title">Job 1</span>
        <span class="career-list__item-percentage">70%</span>
        <svg viewBox="0 0 5 13" id="ico_arrow_mini" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M1 12.5c-.1 0-.2 0-.2-.1-.2-.1-.3-.4-.2-.7l2.9-5.3L.6 1.2C.4 1 .5.7.8.6c.2-.1.5 0 .7.2l3 5.5c.1.1.1.3 0 .5l-3 5.5c-.2.1-.3.2-.5.2z"/>
        </svg>
    </a>
    <a class="career-list__item" href="/jobs/job"><span class="career-list__item-title">Job 2</span><span
                class="career-list__item-percentage">90%</span>
        <svg viewBox="0 0 5 13" id="ico_arrow_mini" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M1 12.5c-.1 0-.2 0-.2-.1-.2-.1-.3-.4-.2-.7l2.9-5.3L.6 1.2C.4 1 .5.7.8.6c.2-.1.5 0 .7.2l3 5.5c.1.1.1.3 0 .5l-3 5.5c-.2.1-.3.2-.5.2z"/>
        </svg>
    </a>
    <a class="career-list__item" href="/jobs/job"><span class="career-list__item-title">Job 3</span><span
                class="career-list__item-percentage">50%</span>
        <svg viewBox="0 0 5 13" id="ico_arrow_mini" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M1 12.5c-.1 0-.2 0-.2-.1-.2-.1-.3-.4-.2-.7l2.9-5.3L.6 1.2C.4 1 .5.7.8.6c.2-.1.5 0 .7.2l3 5.5c.1.1.1.3 0 .5l-3 5.5c-.2.1-.3.2-.5.2z"/>
        </svg>
    </a>
    <a class="career-list__item" href="/jobs/job"><span class="career-list__item-title">Job 4</span><span
                class="career-list__item-percentage">80%</span>
        <svg viewBox="0 0 5 13" id="ico_arrow_mini" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M1 12.5c-.1 0-.2 0-.2-.1-.2-.1-.3-.4-.2-.7l2.9-5.3L.6 1.2C.4 1 .5.7.8.6c.2-.1.5 0 .7.2l3 5.5c.1.1.1.3 0 .5l-3 5.5c-.2.1-.3.2-.5.2z"/>
        </svg>
    </a>
    <a class="career-list__item" href="/jobs/job"><span class="career-list__item-title">Job 5</span><span
                class="career-list__item-percentage">0%</span>
        <svg viewBox="0 0 5 13" id="ico_arrow_mini" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M1 12.5c-.1 0-.2 0-.2-.1-.2-.1-.3-.4-.2-.7l2.9-5.3L.6 1.2C.4 1 .5.7.8.6c.2-.1.5 0 .7.2l3 5.5c.1.1.1.3 0 .5l-3 5.5c-.2.1-.3.2-.5.2z"/>
        </svg>
    </a>
    <a class="career-list__item" href="/jobs/job"><span class="career-list__item-title">Job 6</span><span
                class="career-list__item-percentage">90%</span>
        <svg viewBox="0 0 5 13" id="ico_arrow_mini" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M1 12.5c-.1 0-.2 0-.2-.1-.2-.1-.3-.4-.2-.7l2.9-5.3L.6 1.2C.4 1 .5.7.8.6c.2-.1.5 0 .7.2l3 5.5c.1.1.1.3 0 .5l-3 5.5c-.2.1-.3.2-.5.2z"/>
        </svg>
    </a>
    <a class="career-list__item" href="/jobs/job"><span class="career-list__item-title">Job 7</span><span
                class="career-list__item-percentage">40%</span>
        <svg viewBox="0 0 5 13" id="ico_arrow_mini" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M1 12.5c-.1 0-.2 0-.2-.1-.2-.1-.3-.4-.2-.7l2.9-5.3L.6 1.2C.4 1 .5.7.8.6c.2-.1.5 0 .7.2l3 5.5c.1.1.1.3 0 .5l-3 5.5c-.2.1-.3.2-.5.2z"/>
        </svg>
    </a>
</div>

job-teaser.css

.job-teaser {
  max-width: 80em;
  min-height: 40px;
  margin: 20px auto;
  padding: 0 10px;
}

@media (min-width: 992px) {
  .job-teaser {
    margin: 40px auto 0 auto;
    padding: 0 20px;
  }
}

.job-teaser__inner {
  position: relative;
}

.job-teaser__box {
  position: relative;
  background-color: #968782;
  padding: 25px 15px 15px 15px;
}

@media (min-width: 768px) {
  .job-teaser__box {
    padding: 40px 25px 25px 25px;
    position: absolute;
    width: 49.0196078431%;
    right: 0%;
    z-index: 5;
  }
}

@media (min-width: 992px) {
  .job-teaser__box {
    width: 40.522875817%;
  }
}

.job-teaser__title {
  color: #fff;
  font-size: 20px;
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", "Helvetica Neue", Arial, Sans-Serif;
  margin: 0 0 10px 0;
}

@media (min-width: 992px) {
  .job-teaser__title {
    font-size: 28px;
  }
}

.job-teaser__items {
  font-size: 14px;
}

@media (min-width: 992px) {
  .job-teaser__items {
    font-size: 16px;
  }
}

.job-teaser__item {
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", "Helvetica Neue", Arial, Sans-Serif;
  position: relative;
  border-bottom: 1px solid #CBC3C1;
  padding: 15px 30px 15px 0;
}

.job-teaser__item a {
  color: #ECE9E8;
  display: block;
}

.job-teaser__item a:hover svg,
.job-teaser__item a:active svg,
.job-teaser__item a:focus svg {
  opacity: 1;
  transform: translateX(5px);
}

.job-teaser__item svg {
  opacity: 0;
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  fill: #fff;
  width: 19px;
  height: 13px;
  transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1), opacity 500ms linear;
}

.job-teaser__link {
  float: right;
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", "Helvetica Neue", Arial, Sans-Serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  margin: 30px 0 0 0;
}

.job-teaser__link:hover svg, .job-teaser__link:active svg, .job-teaser__link:focus svg {
  transform: translateX(5px);
}

.job-teaser__link svg {
  fill: #fff;
  width: 19px;
  height: 13px;
  margin: 0 0 0 10px;
  transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1);
}

job-teaser_home.html

<div class="job-teaser__box">
  <h2 class="job-teaser__title">Offene Stellen</h2>
  <ul class="job-teaser__items">
    <li class="job-teaser__item"><a href="#j1"><span>Teamleiter/in im Geschäftsbereich Verkehr  —  100%</span>
    <svg width="19px" height="13px" viewBox="0 0 19 13" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <g transform="rotate(-90 6.5 6.5)">
        <rect x="6" width="1" height="18" rx=".5"/>
        <rect transform="rotate(45 9.119 14.973)" x="8.619" y="10.833" width="1" height="8.279" rx=".5"/>
        <rect transform="rotate(135 3.72 14.973)" x="3.219" y="10.833" width="1" height="8.279" rx=".5"/>
      </g>
    </svg></a></li>
    <li class="job-teaser__item"><a href="#j1"><span>Applikations-Entwickler/in Junior  — 80–100%</span>
    <svg width="19px" height="13px" viewBox="0 0 19 13" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <g transform="rotate(-90 6.5 6.5)">
        <rect x="6" width="1" height="18" rx=".5"/>
        <rect transform="rotate(45 9.119 14.973)" x="8.619" y="10.833" width="1" height="8.279" rx=".5"/>
        <rect transform="rotate(135 3.72 14.973)" x="3.219" y="10.833" width="1" height="8.279" rx=".5"/>
      </g>
    </svg></a></li>
    <li class="job-teaser__item"><a href="#j1"><span>Projektleiter/in Immobilienentwicklung / Immobilienökonomie — 80–100%</span>
    <svg width="19px" height="13px" viewBox="0 0 19 13" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <g transform="rotate(-90 6.5 6.5)">
        <rect x="6" width="1" height="18" rx=".5"/>
        <rect transform="rotate(45 9.119 14.973)" x="8.619" y="10.833" width="1" height="8.279" rx=".5"/>
        <rect transform="rotate(135 3.72 14.973)" x="3.219" y="10.833" width="1" height="8.279" rx=".5"/>
      </g>
    </svg></a></li>
    </ul><a class="job-teaser__link" href="/career"><span>Alle Stellen</span>
    <svg width="19px" height="13px" viewBox="0 0 19 13" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <g transform="rotate(-90 6.5 6.5)">
        <rect x="6" width="1" height="18" rx=".5"/>
        <rect transform="rotate(45 9.119 14.973)" x="8.619" y="10.833" width="1" height="8.279" rx=".5"/>
        <rect transform="rotate(135 3.72 14.973)" x="3.219" y="10.833" width="1" height="8.279" rx=".5"/>
      </g>
    </svg></a>
  </div>