Jump to main content
University Computer Centre
Content
University Computer Centre 

Design Elements for Content

Default Headings

You should structure your web pages with headings (this is especially important for screen readers). Each page begins with a heading level <h1>. For further subdivisions, use level <h2> to <h6> depending on the depth of the hierarchy. Please adhere to this hierarchy correctly.

The style is determined by size and weight (normal, fat).

Heading h1 is the Top and Most Important One

Heading h2 is the First Subdivision

Heading h3 is a Second Sub-hierarchy

Headling h4 is a Further Subdivision

Heading h5 is Another Sub-hierarchy
<h1>Heading h1 is the Top and Most Important One</h1>
<h2>Heading h2 is the First Subdivision</h2>
<h3>Heading h3 is a Second Sub-hierarchy</h3>
<h4>Headling h4 is a Further Subdivision </h4>
<h5>Heading h5 is Another Sub-hierarchy</h5>

If the font size is not to your liking, use a class h1 to h6, that makes one logical headline look like another:

Headline h1 that Looks Like an h2

Headline h2 that Looks Like an h4

<h1 class="h2">Headline h1 that Looks Like an h2</h1>
<h2 class="h4">Headline h2 that Looks Like an h4</h2>

Special Headings

Headings with Lines

Headings with line coloured like the institution (default), grey or black

A Heading is a Writing that is Written on Top

A Heading is a Writing that is Written on Top

A Heading is a Writing that is Written on Top

<h1 class="linie">A Heading is a Writing that is Written on Top</h1>
<h2 class="linie grey">A Heading is a Writing that is Written on Top</h2>
<h3 class="linie black">A Heading is a Writing that is Written on Top</h3>

Headings with spacing

Headings with wider character spacing

A Heading is a Writing that is Written on Top

A Heading is a Writing that is Written on Top

A Heading is a Writing that is Written on Top

<h1 class="topics">A Heading is a Writing that is Written on Top</h1>
<h2 class="topics">A Heading is a Writing that is Written on Top</h2>
<h3 class="topics">A Heading is a Writing that is Written on Top</h3>

Headings with Double Line

Headings with lines above and below in the colour of the institution (standard), grey and black.

A heading is a writing that is written on top

A heading is a writing that is written on top

A heading is a writing that is written on top

<h1 class="teaser">A heading is a writing that is written on top</h1>
<h2 class="teaser grey">A heading is a writing that is written on top</h2>
<h3 class="teaser black">A heading is a writing that is written on top</h3>

Tables

Following the guidelines of the corporate design, tables are displayed with horizontal black lines (default). Alternatively, grey lines (class="horizontal grey") can be used.

If tables are labeld with a table heading, the caption-element, which directly follows the table-element, is used for this purpose.

The summary-element should only be used when special instructions are needed, this helps screen reader users to make sense of the complex table.

Alignment Tables

Without specifying the class, the table can be used to align text, but this is not advisable with regard to standard conformity (separation of content and layout) and accessibility aspects. If this option is nevertheless used, the attribute role="presentation" in the table-element tells the browser to omit the table information for screen readers. You can also find information on designing tables in responsive web design in our design fudamentals.

Table Heading
Table Head Link Table Head Link Table Head Link
Table cell Link Table cell Link Table cell Link
Table cell Link Table cell Link Table cell Link
Table Head Link Table Head Link Table Head Link
Table cell Link Table cell Link Table cell Link
Table cell Link Table cell Link Table cell Link
Table Head Link Table Head Link Table Head Link
Table cell Link Table cell Link Table cell Link
Table cell Link Table cell Link Table cell Link
<table class="horizontal">
  <caption>Table Heading</caption>
  <tbody>
    <tr>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="horizontal grey">
  <tbody>
    <tr>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="zeile">
  <tbody>
    <tr>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

Images/Photos on the Website

Please only use images or photos to which you have the rights for online publication! Images published under a Creative-Commons-Licence for example, can be used - but only if the conditions stated in the corresponding licence are complied with (in the case of the CC-BY licence: the name of the author must be mentioned).

Images should always be published with the alt-attribute set:

<img src="image.png" alt="Image description">

Please read the information on alternative text in the chapter on accessibility..

Define Copyright Notice

The author or copyright holder can be displayed directly on the image by means of an overlay (without having to integrate the lettering directly into the image). To do this, an image must be surrounded by an <figure /> element with the CSS class imgtitle and a title-attribute with the copyright notice. By default, the notice is then displayed in white font with a black border at the bottom right of the image. With the additional CSS classes left (bottom left) and black (black font with white border) this can also be adapted.
Smartphone and laptop with TU page accessed
<figure class="imgtitle black left" title="Copyright-Notice">
  <img class="img-responsive" src="images/responsive-design.jpg"
       alt="Smartphone and laptop with TU page accessed">
</figure>

Icons

Named Characters

The corporate design of the TU Chemnitz includes symbols that you can use on your pages. In addition to this, Bootstrap itself offers over 200 so-called glyphs from the character set of Glyphicons Halflings. For further information, please refer to the Bootstrap documentation.

  • tucicon-nav-up
  • tucicon-nav-right
  • tucicon-nav-left
  • tucicon-nav-down
  • tucicon-link
  • tucicon-link-extern
  • tucicon-link-download
  • tucicon-check
  • tucicon-error
  • tucicon-rss
  • tucicon-key-closed
  • tucicon-key-open
  • tucicon-feedback-good
  • tucicon-feedback-neutral
  • tucicon-feedback-bad
  • tucicon-telephone
  • tucicon-search
  • tucicon-video
  • tucicon-emergency
  • tucicon-contact
  • tucicon-mail
  • tucicon-pdf
  • tucicon-sm-fb
  • tucicon-sm-tw
  • tucicon-sm-xi
  • tucicon-sm-yt
  • tucicon-sm-in
  • tucicon-sm-li
  • tucicon-sm-ma
  • tucicon-sm-sc
  • tucicon-sm-tt

Usage

The symbols "tucicon-nav-…" should be used for navigation on the page and between pages. The icons "tucicon-link" and "tucicon-link-extern" are used to identify references/links. And the symbols "tucicon-sm-…" serve to label social media content (in = Instagram, fb = Facebook, tw = Twitter/X, xi = Xing, yt = YouTube, li = LinkedIn).

The icons are predefined in classes and are integrated by specifying the corresponding designation.

Special Case class="extern"

Links within the blocks "extern" or links with the class "linkextern" always include the icon behind the link text. When using the class "tucicon-link-extern", however, the symbol is placed before the text, as is the case with all tucicon classes.

Icons are black by default, but can be coloured as desired using the CSS property color. The size can also be changed.

<button class="btn btn-info" type="button">
 <span class="tucicon-search">Search</span></button>
<button class="btn btn-info" type="button">
 <span class="tucicon-search" style="color:red">Search</span></button>

All Characters of the Icon Collection of the TU Chemnitz (state: August 2023)

The Icon Collection of the TU Chemnitz includes many more (earmarked) symbols. Those will not all be provided as a CSS class, but can be used by entering the respective character set position:

<span class="tucicon" aria-hidden="true">&#x1f44d;</span>
EntitätDescription
&#xe081;arrow left
&#xe082;arrow right
&#xe083;arrow up
&#xe084;arrow bottom left
&#xe085;arrow bottom right
&#xe086;arrow top left
&#xe087;arrow top right
&#xe088;arrow back
&#xe0b9;dead end
&#xe0ba;district
&#xe089;entrance
&#xe08a;exit
&#xe08b;accessible entrance
&#xe08c;accessible exit
&#xe08d;toilets
&#xe08e;toilet women
&#xe08f;toilet men
&#xe090;accessible toilet
&#xe091;baby change
&#xe092;toilet allgender
&#xe0bb;parent-child room
&#xe093;rest room
&#xe094;computerpool
&#xe095;wardrobe/changing room
&#xe096;printer
&#xe097;sports ground
&#xe098;workshop
&#xe099;laboratory
&#xe09a;canteen
&#xe09b;snacks, coffee, tea
&#xe09c;utility room
&#xe0bc;women changing room
&#xe0bd;men changing room
&#xe008;public transport information
&#xe0c0;tram stop
&#xe0c1;bus stop
&#xe09e;bicycle
&#xe09f;car park
&#xe0a0;accessible car park
&#xe0a1;electric charging station
&#x2316;position
&#xe0a3;library / book
&#xe0a5;reading room
&#xe0a6;plant room / server
&#xe0a7;storeroom
&#xe0a8;post room
&#xe0a9;Garden of Ken
&#xe0aa;print service
&#xe0ab;stairs up
&#xe0ac;stairs down
&#xe0ad;passenger lift
&#xe0ae;goods lift
&#x1f3eb;seminar room
&#xe0b0;lecture hall
&#xe0be;stairs
&#xe0a4;hybrid teaching
&#xe0b1;conference room
&#xe0b2;first-aid room
&#xe0b3;first-aider
&#xe0b4;defibrillator
&#xe0b5;assembly point in case of danger
&#xe0b6;fire extinguisher
&#xe0b7;hearing assistance systems
&#xe0b8;no smoking
&#xe0bf;office
EntityDescription
&#x1f464;user
&#x2261;menu
&#x2262;menu selection
&#x2699;settings
&#x2753;help
&#x2139;information
&#x1f4ca;statistics
&#x1f4f7;photograph
&#x1f4cb;survey
&#x2af5;scan barcode
&#x1f3a7;podcast
&#x1f4d5;book
&#x1f4d4;academic paper
&#x266b;music
&#x1f310;language selection
&#x1f4f0;news
&#x1f393;field of study / graduates
&#x1f4c5;event calendar
&#x1f52c;research
&#x1f3eb;teaching
&#x21b9;transfer
&#x2302;start / home
&#x23f0;clock
&#x1f78b;target
&#xe0d0;audience
&#xe0d1;exam
&#xe0d2;certificate/attestation
&#xe0d3;admission
&#xe0d4;compensation for disadvantages
&#x25b3;arrow up (tucicon-nav-up)
&#x25b7;arrow right (tucicon-nav-right)
&#x25c1;arrow left (tucicon-nav-left)
&#x25bd;arrow down (tucicon-nav-down)
&#x1f4c2;archive
&#x2316;current position
&#x2757;important
&#x1f5d1;waste / delete
&#x2665;like
&#x1f5f2;lightning
&#x1f4f1;smartphone
EntityDescription
&#x2192;link intern (tucicon-link)
&#x21a6;link extern (tucicon-link-extern)
&#x21e3;download (tucicon-link-download)
&#x2705;check (tucicon-check)
&#x274e;error (tucicon-error)
&#x1e58;RSS-feed (tucicon-rss)
&#x25bd;dropdown (tucicon-nav-down)
&#x25cb;prohibited (tucicon-key-closed)
&#x25cc;unblock (tucicon-key-open)
&#x1f446;touch
&#x2601;cloud
&#x270d;blog
&#x23f5;play button
&#x1f5a9;calculate
&#x1f4c8;uptrend
&#x1f517;relation/link
&#x1f44d;good feedback (tucicon-feedback-good)
&#x1f450;neutral feedback (tucicon-feedback-neutral)
&#x1f44e;bad feedback (tucicon-feedback-bad)
&#x2706;call (tucicon-telephone)
&#x2315;search (tucicon-search)
&#x23f4;video (tucicon-video)
&#x26a0;emergency situation (tucicon-emergency)
&#x1f5e8;contact (tucicon-contact)
&#x2709;Email (tucicon-mail)
&#x24ab;PDF (tucicon-pdf)
&#xe021;Word
&#xe023;Excel
&#x24b5;ZIP
&#xe022;Powerpoint
&#x1f5cb;file/sheet/paper
&#xe00d;webcam
EntityDescription
&#xe001;print generator
&#xe002;navigation
&#xe003;time table
&#xe009;calendar
&#xe004;lecture feedback
&#xe006;OPAL
&#xe007;people search
&#xe005;campus map
&#x1f4f7;photo
&#xe016;robotics/automation
&#x1f4a1;light bulb / idea
&#xe017;group work
&#x23f2;pressure&thinsp/ measurement
&#x1f30d;earth
&#x1f91d;together
&#x1f984;unicorn
&#xe00b;image database
&#xe00c;rights
&#xe00e;digital teaching
&#xe00f;digital exam
&#xe010;OER
&#xe011;sound
&#xe012;smiley
&#xe013;formula
&#xe014;accessibility
&#xe015;accessible PDFs
&#xe018;network
&#xe019;formula (inverse)
&#x1f9ec;organic/DNA
&#xe01a;3D/perspective
&#x1f9e0;Thinking / brain
&#xe01b;chip/electronics
EntityDescription
&#x1e1f;Facebook (tucicon-sm-fb)
&#x0257;TikTok (tucicon-sm-tt)
&#x1e8e;YouTube (tucicon-sm-yt)
&#x1e8a;Xing (tucicon-sm-xi)
&#x1e36;LinkedIn (tucicon-sm-li)
&#x25d8;Instagram (tucicon-sm-in)
&#x265f;Snapchat (tucicon-sm-sc)
&#x24dc;mastodon (tucicon-sm-ma)
&#x1e6b;Twitter/X (tucicon-sm-tw)
EntityDescription
&#xe101;E-media
&#xe0a6;database
&#xe103;pupil
&#x1f393;students
&#x1f5e8;guests
&#xe106;academical writing
&#xe107;publicise
&#xe108;consultation
&#xe109;open access
&#xe110;open data
&#x1d76e;open source
&#xe010;OER
&#xe113;citizen science
&#xe114;open review / review
&#xe115;open science
EntityDescription
&#xe201;materials and smart systems
&#xe202;resource-efficient production and lightweight construction
&#xe203;humans and technology

Highlighting

Special text markings can be highlighted in colour. Three different types of boxes are available for this purpose.

Note Boxes for Special Emphasis in the Text

Note boxes are usually used directly in the text for special highlights. They do not have a coloured background, but are identified by a matching coloured marker on the left-hand side and a frame.- The standard class is designated "tucbox-tip" and appears in the university colour by default.

Heading Note Box tucbox-tip Link

This box appears in the university colours … Link

Heading Note Box tucbox-tip-info Link

This box is grey … Link

Heading Note Box tucbox-tip-warning Link

This box is intended to warn … Link

Heading Note Box tucbox-tip-danger Link

This box marks particularly important, urgent and special notes to be emphasised … Link

<div class="tucbox-tip">
<h4>Heading Note Box <code>tucbox-tip</code> <a href="#">Link</a></h4>
<p>This box appears in the university colours &hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-info">
<h4>Heading Note Box <code>tucbox-tip-info</code> <a href="#">Link</a></h4>
<p>This box is grey &hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-warning">
<h4>Heading Note Box <code>tucbox-tip-warning</code> <a href="#">Link</a></h4>
<p>This box is intended to warn &hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-danger">
<h4>Heading Note Box <code>tucbox-tip-danger</code> <a href="#">Link</a></h4>
<p> This box marks particularly important, urgent and special notes to be emphasised &hellip; <a href="#">Link</a></p>
</div>

Text Hightlights

These areas are intended to highlight information within texts. Text labels appear in the faculty or facility colour by default, but can also be used in grey.

This represents a special hightlight in the text and can be extended as desired. Link
This represents a special hightlight in the text and can be extended as desired. Link
<div class="tucbox-area">This represents a special <strong>hightlight</strong> in the text
and can be extended as desired.  <a href="#">Link</a></div>

<div class="tucbox-area-info">This represents a special <strong>hightlight</strong> in the text
and can be extended as desired. <a href="#">Link</a></div>

Panels

Panels can also be used to highlight text. Unlike the text labels, the area is not completely filled with colour. Only the heading and the border are coloured to match the respective class. Panels also appear in the faculty or facility colour by default and can alternatively be used in grey.

Headings in Panel, also with Link

This is the content.

Hadings in Panel tucbox-panel-info, also with Link

This is the content.
<div class="tucbox-panel">
<div class="panel-heading">
<h3 class="panel-title">Headings in Panel, <a href="#">also with Link</a></h3>
</div>
<div class="panel-body">This is the content.</div>
</div>

<div class="tucbox-panel-info">
<div class="panel-heading">
<h3 class="panel-title">Hadings in Panel <code>tucbox-panel-info</code>, <a href="#">also with Link</a></h3>
</div>
<div class="panel-body">This is the content.</div>
</div>

Alert Boxes

"Alerts" have no round corners and no shadows. Four colours are available (faculty or facility colour, grey, orange for warnings, red for danger/prohibitions). A typical use for alerts is to warn about missing input in a form.

Well done! You have just read this message.
Attention! This text needs your attention, but it is not as important as it seems.
Warning! You should attach more importance to this text!
Error! This important information describes the details.
<div class="alert alert-success"><strong>Well done!</strong> You have just read <a href="#">this message</a>.</div>
<div class="alert alert-info"><strong>Attention!</strong> This text needs <a href="#">your attention,</a> but it is not as important as it seems.</div>
<div class="alert alert-warning"><strong>Warning!</strong> You should attach more <a href="#">importance </a> to this text!</div>
<div class="alert alert-danger"><strong>Error!</strong> This <a href="#">important information</a> describes the details.</div>

Buttons

The standard button classes included in Bootstrap have been redefined as follows. The button of class btn-default is displayed in the colour of the institution or faculty.

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

The same applies to all classes that use buttons, such as the class btn-group.

Buttons are actually meant for actions.Every now and then links are also designed like buttons (only available on German). For accessibility reasons, it should be remembered in such cases to provide the screen reader with this information via the WAI-ARIA role.:

<a class="btn btn-default" href="/urz/www/bf" role="button">Notes on accessibility </a>

Formulare

Responsive design is particularly useful for web-based forms, so that meaningful input can be made on small mobile devices as well as on the normal PC screen. For this purpose the use of Grids is very useful, as you can see in the following example:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputTerm" class="col-xm-3 control-label">Search term</label>
    <div class="col-xm-9">
      <input type="text" class="form-control" id="inputTerm" placeholder="Search term">
    </div>
  </div>
  <div class="form-group">
    <label for="inputCategory" class="col-xm-3 control-label">Category</label>
    <div class="col-xm-9">
      <select class="form-control" id="inputCategory">
        <option value="web" selected>Web page</option>
        <option value="dict">Dictionary</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <div class="checkbox">
        <label><input type="checkbox" id="checkCase"> Case-sensitive</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

Notes

Mathematical formulas

On this page we will show you a method of presenting mathematical formulas in a visually appealing and at the same time accessible way on web pages. Formulas can be entered in different formats, in our example we used LaTeX. Using the right mouse button, the website viewer can adjust the output.

MathJax is used for this, which we have mirrored locally so that the website visitors only obtain the necessary resources from our web servers. In order to save resources, the integration should only take place on pages that actually contain formulas. To use the current version 3 of MathJax with TeX code, these two JavaScript files must be specified in the header:

  • https://www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js (for Internet Explorer 11 compatibility)
  • https://www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js

Before requesting seite() these definitions should therefore be made:

$javascript[] = '//www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js';
$javascript[] = '//www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js';

In the content, you can then simply open a maths environment and specify formulas in it:

<div class="tucbox-tip">
Ohm's law: \[ R = \frac{U}{I} \]
<p>(The strength of current is therefore calculated with \( I = \frac{U}{R} \).)</p>
</div>
Ohm's law: \[ R = \frac{U}{I} \]

(The strength of current is therefore calculated with \( I = \frac{U}{R} \).)

Right-click on the form display to open a context menu in which, for example, language output settings can be made.

For more information, we link to the MathJax documentation: