---
title: "Styling"
manual: "Academic Contacts for Pages"
version: "3.0"
permalink: "https://docs.typo3.org/permalink/fgtclb/academic-contacts4pages:styling@3.0"
source: "Styling/Index.rst"
rendered: "2026-10-26T17:55:07+00:00"
---

# Styling {#styling}

The contact 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](https://docs.typo3.org/p/fgtclb/academic-base/main/en-us/Styling/Index.html#styling).
This chapter shows how the markup of this extension is built up.

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

| Plugin | Content element type | Outermost element |
| --- | --- | --- |
| Contact list | `academiccontacts4pages_list` | `academic-contacts4pages-list` |

## The contact list {#styling-list}

Every contact is rendered as the profile item of
**EXT:academic_persons**, inside a grid column of an item list:

```html
<div class="academic-contacts4pages-list">
    <!-- the header of the content element, when the plugin renders it -->
    <div class="ace-content">
        <div class="ace-itemlist">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <p class="ace-role">Role of the contact</p>
                    <!-- the profile item of EXT:academic_persons -->
                    <article class="ace-item">…</article>
                </div>
            </div>
        </div>
    </div>
</div>
```

-   With **Group by role**, every role renders an `ace-itemlist` of its
    own. Its `row` starts with the heading of the role, a `<header
    class="ace-header">` around an `ace-title`, before the grid columns. The
    contacts without a role follow in a last `ace-itemlist` without a heading.
    A grouped contact does not repeat its role in an `ace-role`.
-   The profile item is built up as described in the chapter
    [Styling of academic_persons](https://docs.typo3.org/p/fgtclb/academic-persons/main/en-us/Styling/Index.html).
    The grid column is the cell of the contact list and the
    `<article class="ace-item">` is the profile. In the list that is not
    grouped, the role is a `<p class="ace-role">` in that column, in
    front of the article.

## An example {#styling-example}

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

```css
.academic-contacts4pages-list .ace-role {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.academic-contacts4pages-list .ace-itemlist + .ace-itemlist {
    margin-top: 2rem;
}
```

The development instances style the contacts with the partial
[\_academic-persons-list.scss](https://github.com/fgtclb/academic-extensions/blob/main/packages-dev/dev-site/Resources/Private/Scss/frontend/_academic-persons-list.scss),
which styles the profile lists of `academic_persons` as well, since a contact
renders the same item markup, 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.

Every contact is rendered through the partial `Contacts/Item.html`, so a
project that needs other markup for a contact overrides that one partial
rather than the list template.