Styling 

The outermost element 

The job list 

The list renders the view the content element selects. The card view and the list view render the same markup and differ only in the class of the item list:

<div class="academic-bite-jobs-list">
    <!-- the header of the content element, when the plugin renders it -->
    <div class="ace-itemlist ace-card-view">     <!-- or ace-list-view -->
        <article class="ace-item">
            <div class="ace-item-content">
                <h2 class="ace-title"><a href="…">Job title</a></h2>
                <ul class="ace-list">
                    <li class="ace-list-item">
                        <b class="ace-label">Ends on:</b>
                        <span class="ace-value">31.12.2026</span>
                    </li>
                </ul>
            </div>
        </article>
    </div>
</div>

The table view renders one row per job:

<table class="ace-table">
    <thead class="ace-head">
        <tr class="ace-item">
            <th class="ace-label">Title</th>
            <th class="ace-label">Ends on</th>
        </tr>
    </thead>
    <tbody class="ace-body">
        <tr class="ace-item">
            <td class="ace-value"><a class="ace-link" href="…">Job title</a></td>
            <td class="ace-value">31.12.2026</td>
        </tr>
    </tbody>
</table>

• The level of the heading of a job follows the header layout of the content element. With a header layout from 1 to 4 it is one level lower when the jobs are grouped or the content element has a subheader, two levels lower when both apply, and never lower than <h6> . With the default layout, an <h2> , only the grouping makes it an <h3> .
• Grouped jobs render one heading ace-title per group, followed by the item list or the table of the group.
• A list without jobs renders the message in a <span class="ace-empty"> .
• The head and body of the table are ace-head and ace-body. The table view of EXT:academic_persons names them ace-table-header and ace-table-body, the profile list of EXT:academic_persons_edit ace-header and ace-content.

An example 

Rules in the stylesheet of the site package, scoped by the outermost element:

.academic-bite-jobs-list .ace-card-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.5rem;
}

.academic-bite-jobs-list .ace-list {
    list-style: none;
    padding-left: 0;
}

The development instances style the job offers with the partial _academic-jobs.scss, which styles the jobs of academic_jobs as well, together with the shared rules of _academic-base.scss, both of the site package academics_dev_site, a complete example to copy from.

To change the markup itself, override the partials as described in Templates.