---
title: "Styling"
manual: "Academic Bite Jobs"
version: "main"
permalink: "https://docs.typo3.org/permalink/fgtclb/academic-bite-jobs:styling@main"
source: "Styling/Index.rst"
rendered: "2026-10-26T19:20:41+00:00"
---

# Styling {#styling}

The job list renders its markup with the class system of the academic
extensions and ships no styling for it. The system, the classes of Bootstrap it
keeps and how a site package styles the markup are described once, in the
chapter Styling of academic_base.
This chapter shows how the markup of this extension is built up.

## The outermost element {#styling-outermost-element}

| Plugin | Content element type | Outermost element |
| --- | --- | --- |
| Job list | `academicbitejobs_list` | `academic-bite-jobs-list` |

## The job list {#styling-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:

```html
<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:

```html
<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 {#styling-example}

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

```css
.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](https://github.com/fgtclb/academic-extensions/blob/main/packages-dev/dev-site/Resources/Private/Scss/frontend/_academic-jobs.scss),
which styles the jobs of `academic_jobs` as well, together with the shared
rules of [\_academic-base.scss](https://github.com/fgtclb/academic-extensions/blob/main/packages-dev/dev-site/Resources/Private/Scss/frontend/_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](https://docs.typo3.org/permalink/fgtclb/academic-bite-jobs:templates@main).