Skip to content
DocumentationExamples
← All components

Job Listing Table

Filter openings by location without affecting other modules.

Open demo ↗

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references.


<div data-cp-jobs="">
<label>
        Location
        <select class="form-select mb-4" data-cp-location="">
<option>
          All locations
         </option>
<option>
          Remote
         </option>
<option>
          New York
         </option>
</select>
</label>
<div class="cp-jobs">
<article data-job-location="Remote">
<a href="/templates/jobs/detail/">
          Design Director
         </a>
<span>
          Remote
         </span>
</article>
<article data-job-location="New York">
<a href="/templates/jobs/detail/">
          Customer Success
         </a>
<span>
          New York
         </span>
</article>
<article data-job-location="Remote">
<a href="/templates/jobs/detail/">
          Front-end Developer
         </a>
<span>
          Remote
         </span>
</article>
</div>
<p data-job-status="" role="status">
</p>
</div>