Skip to main content

Other Elements

Jobs List​

data-sf="jobs-list" attribute is the container that all the job cards will be held.

data-sf="jobs-list"
Example!
<div class="row" data-sf="jobs-list">
    <div class="col-6" data-sf="job">
        <h3 data-sf="job-title"></h3>
        <p data-sf="job-summary"></p>
        <a data-sf="job-link" href="www.example.com/JobPage.html"> More Details </a>
    </div>
</div>
http://localhost:3000

Software Developer

Lorem ipsum Ut enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More Details

Data Analyst

Lorem ipsum Ut enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More Details

Job​

data-sf="job" is the container for a single job card, and will be passed to the SmartFeed framework as the job card design to use when appending all the job adverts.

data-sf="job"
Example!
<div class="row" data-sf="jobs-list">
    <div class="col-6" data-sf="job">
        <h3 data-sf="job-title"></h3>
        <p data-sf="job-summary"></p>
        <a data-sf="job-link" href="www.example.com/JobPage.html"> More Details </a>
    </div>
</div>
http://localhost:3000

Software Developer

Lorem ipsum Ut enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More Details

Data Analyst

Lorem ipsum Ut enim ad minim veniam, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More Details

Loader​

Able to design or attach an exciting loader, displays when the jobs are loading and will disappear when loaded.

data-sf="loader"
Example!
<div class="spinner-border text-primary" role="status" data-sf="loader">
  <span class="visually-hidden">Loading...</span>
</div>
http://localhost:3000

Loaded Jobs​

Will return the number of jobs that have been loaded. This is useful when using the Load More element.

data-sf="jobs-loaded"
Example!
<div>Jobs Loaded: <span data-sf="jobs-loaded"></span></div>
http://localhost:3000
Jobs Loaded: 7

Load More​

Will attach an event handler when clicked will load more jobs.

data-sf="load-more"
note

Max Jobs Loaded​

You will need to set the number of jobs to load in the configuration here.

Example!
<button class="btn btn-primary" data-sf="load-more">Load More</button>
http://localhost:3000

No Results​

Allow for a custom no result message. SmartFeed will show if no jobs are found on the ATS; otherwise, it will hide if jobs are found on the ATS.

data-sf="no-results"
Example!
<div data-sf="no-results"></div>
http://localhost:3000
Couldn't find any results matching your search...

Total Jobs​

Will return the number of total jobs from the ATS.

data-sf="jobs-total"
Example!
<div>Jobs Total: <span data-sf="jobs-total"></span></div>
http://localhost:3000
Jobs Total: 30