Jump to content

Herzzentrum Bonn


Recommended Posts

Herzzentrum Bonn

The Herzzentrum Bonn (Heart Center Bonn) is part of the University Hospital Bonn (UKB) and consists of the cardiology and heart chirurgy clinics. Goals for the website were a clear content structure, friendly and personal communication tailored to the different visitor groups and easier maintenance and content updates. Concept, design and implementation by schwarzdesign.


You can read more about the challenges, concept and implementation of this project in the case study on our website (German only).

Notable modules used

Development insights

One thing to note is the central management of staff members. To represent staff members as well as the hiarchies and different departments, we created a layered template structure:

  • person – Represents a single person and has fields for name, title, position, portrait, contact info etc.
  • hierarchy – Represents a hiarchy level or department in the organisational structure. Has person pages as children.
  • people – This is a singleton template which displays all team members sorted by hierarchy level. Has hierarchy pages as children.

The central staff database is also used to display people throughout the site – for example, the experts on angiology on the angiology page. Most of the editorial content is created through a RepeaterMatrix field with different section types. The section type for people contains a simple page reference field, allowing the editor to select the people to display in a given context while still being able to edit their contact info in a central place.

Another interesting content type are the track records on the homepage. Those are implemented using CountUp.js and a custom IntersectionObserver script to trigger the animation as soon as the section comes into view.

Finally, we built a very flexible grid section which uses CSS grid to display grids with variable contents and row/column spans (see an example here).








  • Like 10
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...