Jobs Grid

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

{{section_id}}{{header_heading}}{{header_description}}{{header_cta1_href}}{{header_cta1}}{{header_cta2_href}}{{header_cta2}}{{job1_logo}}{{job1_logo_alt}}{{job1_title}}{{job1_location}}{{job1_jobType}}{{job1_locationType}}{{job1_description}}{{job1_time}}{{job2_logo}}{{job2_logo_alt}}{{job2_title}}{{job2_location}}{{job2_jobType}}{{job2_locationType}}{{job2_description}}{{job2_time}}{{job3_logo}}{{job3_logo_alt}}{{job3_title}}{{job3_location}}{{job3_jobType}}{{job3_locationType}}{{job3_description}}{{job3_time}}{{job4_logo}}{{job4_logo_alt}}{{job4_title}}{{job4_location}}{{job4_jobType}}{{job4_locationType}}{{job4_description}}{{job4_time}}{{job5_logo}}{{job5_logo_alt}}{{job5_title}}{{job5_location}}{{job5_jobType}}{{job5_locationType}}{{job5_description}}{{job5_time}}{{job6_logo}}{{job6_logo_alt}}{{job6_title}}{{job6_location}}{{job6_jobType}}{{job6_locationType}}{{job6_description}}{{job6_time}}

Componentes requeridos

buttontypographyimage

Anatomía CSS

<div class="layoutJobsGrid">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: jobs-grid — structure only, pure DS tokens */
.l-jobs-grid {
  padding: 80px 32px;
}

.l-jobs-grid__header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 16px;
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .l-jobs-grid__header {
    grid-template-columns: 1fr max-content;
    gap: 24px;
    padding-bottom: 24px;
  }
}

.l-jobs-grid__title-area {
  max-width: 28rem;
}

.l-jobs-grid__heading {
  font-size: 25px;
  font-weight: 700;
  color: #0a0a0a;
}

@media (min-width: 768px) {
  .l-jobs-grid__heading {
    font-size: 31.25px;
  }
}

.l-jobs-grid__description {
  margin-top: 8px;
  font-size: 16px;
  color: #525252;
}

.l-jobs-grid__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 768px) {
  .l-jobs-grid__actions {
    justify-content: flex-start;
  }
}

.l-jobs-grid__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.l-jobs-grid__filter {
  border: 1px solid #e5e5e5;
  padding: 8px;
  background: none;
  cursor: pointer;
  color: #0a0a0a;
}

.l-jobs-grid__filter-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.l-jobs-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .l-jobs-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.l-jobs-grid__card {
  border: 1px solid #e5e5e5;
  padding: 24px;
}

.l-jobs-grid__card-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .l-jobs-grid__card-content {
    grid-template-columns: max-content 1fr;
  }
}

.l-jobs-grid__logo-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .l-jobs-grid__logo-wrapper {
    margin-bottom: 24px;
  }
}

.l-jobs-grid__logo {
  width: 4.5rem;
  height: 4.5rem;
  min-height: 4.5rem;
  min-width: 4.5rem;
  object-fit: cover;
}

.l-jobs-grid__info {
  display: flex;
  align-items: flex-start;
}

.l-jobs-grid__meta {
  flex: 1;
}

.l-jobs-grid__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #0a0a0a;
}

@media (min-width: 768px) {
  .l-jobs-grid__title {
    font-size: 25px;
  }
}

.l-jobs-grid__meta-row {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.l-jobs-grid__meta-item {
  font-size: 12.8px;
  color: #525252;
}

.l-jobs-grid__meta-dot {
  margin: 0 8px;
  color: #525252;
}

.l-jobs-grid__description {
  margin-top: 12px;
  font-size: 16px;
  color: #0a0a0a;
}

.l-jobs-grid__timestamp {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .l-jobs-grid__timestamp {
    position: static;
    margin-left: 24px;
  }
}

.l-jobs-grid__time-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 8px;
  color: #0a0a0a;
}

.l-jobs-grid__time {
  font-size: 12.8px;
  color: #525252;
}