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>
Links
Links in the text are always shown in the colour of the institution. Additionally, the link can be preceded by a small arrow. External links are the links that mark pages leaving the TU Chemnitz web pages. These links should be marked accordingly. The symbol is used for marking.
This is a link with an arrow.
This is a link that refers to an external page.
<a href="#link">This is the default link.</a><br />
<a class="link" href="#link">This is a link with an arrow.</a><br />
<a class="linkextern" href="#link" target="_blank">This is a link that refers to an external page.</a>
Notes:
The addition target=
"_blank"
opens the link in a new tab. In this case, please pay attention to this for the sake of accessibility, make sure that the context change (new tab) is indicated in the link text. You will find further details on accessible link texts in our guide.
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 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.
<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">👍</span>
Entität | Description |
---|---|
 | arrow left |
 | arrow right |
 | arrow up |
 | arrow bottom left |
 | arrow bottom right |
 | arrow top left |
 | arrow top right |
 | arrow back |
 | dead end |
 | district |
 | entrance |
 | exit |
 | accessible entrance |
 | accessible exit |
 | toilets |
 | toilet women |
 | toilet men |
 | accessible toilet |
 | baby change |
 | toilet allgender |
 | parent-child room |
 | rest room |
 | computerpool |
 | wardrobe/changing room |
 | printer |
 | sports ground |
 | workshop |
 | laboratory |
 | canteen |
 | snacks, coffee, tea |
 | utility room |
 | women changing room |
 | men changing room |
 | public transport information |
 | tram stop |
 | bus stop |
 | bicycle |
 | car park |
 | accessible car park |
 | electric charging station |
⌖ | position |
 | library / book |
 | reading room |
 | plant room / server |
 | storeroom |
 | post room |
 | Garden of Ken |
 | print service |
 | stairs up |
 | stairs down |
 | passenger lift |
 | goods lift |
🏫 | seminar room |
 | lecture hall |
 | stairs |
 | hybrid teaching |
 | conference room |
 | first-aid room |
 | first-aider |
 | defibrillator |
 | assembly point in case of danger |
 | fire extinguisher |
 | hearing assistance systems |
 | no smoking |
 | office |
Entity | Description |
---|---|
👤 | user |
≡ | menu |
≢ | menu selection |
⚙ | settings |
❓ | help |
ℹ | information |
📊 | statistics |
📷 | photograph |
📋 | survey |
⫵ | scan barcode |
🎧 | podcast |
📕 | book |
📔 | academic paper |
♫ | music |
🌐 | language selection |
📰 | news |
🎓 | field of study / graduates |
📅 | event calendar |
🔬 | research |
🏫 | teaching |
↹ | transfer |
⌂ | start / home |
⏰ | clock |
🞋 | target |
 | audience |
 | exam |
 | certificate/attestation |
 | admission |
 | compensation for disadvantages |
△ | arrow up (tucicon-nav-up ) |
▷ | arrow right (tucicon-nav-right ) |
◁ | arrow left (tucicon-nav-left ) |
▽ | arrow down (tucicon-nav-down ) |
📂 | archive |
⌖ | current position |
❗ | important |
🗑 | waste / delete |
♥ | like |
🗲 | lightning |
📱 | smartphone |
Entity | Description |
---|---|
→ | link intern (tucicon-link ) |
↦ | link extern (tucicon-link-extern ) |
⇣ | download (tucicon-link-download ) |
✅ | check (tucicon-check ) |
❎ | error (tucicon-error ) |
Ṙ | RSS-feed (tucicon-rss ) |
▽ | dropdown (tucicon-nav-down ) |
○ | prohibited (tucicon-key-closed ) |
◌ | unblock (tucicon-key-open ) |
👆 | touch |
☁ | cloud |
✍ | blog |
⏵ | play button |
🖩 | calculate |
📈 | uptrend |
🔗 | relation/link |
👍 | good feedback (tucicon-feedback-good ) |
👐 | neutral feedback (tucicon-feedback-neutral ) |
👎 | bad feedback (tucicon-feedback-bad ) |
✆ | call (tucicon-telephone ) |
⌕ | search (tucicon-search ) |
⏴ | video (tucicon-video ) |
⚠ | emergency situation (tucicon-emergency ) |
🗨 | contact (tucicon-contact ) |
✉ | Email (tucicon-mail ) |
⒫ | PDF (tucicon-pdf ) |
 | Word |
 | Excel |
⒵ | ZIP |
 | Powerpoint |
🗋 | file/sheet/paper |
 | webcam |
Entity | Description |
---|---|
 | print generator |
 | navigation |
 | time table |
 | calendar |
 | lecture feedback |
 | OPAL |
 | people search |
 | campus map |
📷 | photo |
 | robotics/automation |
💡 | light bulb / idea |
 | group work |
⏲ | pressure&thinsp/ measurement |
🌍 | earth |
🤝 | together |
🦄 | unicorn |
 | image database |
 | rights |
 | digital teaching |
 | digital exam |
 | OER |
 | sound |
 | smiley |
 | formula |
 | accessibility |
 | accessible PDFs |
 | network |
 | formula (inverse) |
🧬 | organic/DNA |
 | 3D/perspective |
🧠 | Thinking / brain |
 | chip/electronics |
Entity | Description |
---|---|
ḟ | Facebook (tucicon-sm-fb ) |
ɗ | TikTok (tucicon-sm-tt ) |
Ẏ | YouTube (tucicon-sm-yt ) |
Ẋ | Xing (tucicon-sm-xi ) |
Ḷ | LinkedIn (tucicon-sm-li ) |
◘ | Instagram (tucicon-sm-in ) |
♟ | Snapchat (tucicon-sm-sc ) |
ⓜ | mastodon (tucicon-sm-ma ) |
ṫ | Twitter/X (tucicon-sm-tw ) |
Entity | Description |
---|---|
 | E-media |
 | database |
 | pupil |
🎓 | students |
🗨 | guests |
 | academical writing |
 | publicise |
 | consultation |
 | open access |
 | open data |
𝝮 | open source |
 | OER |
 | citizen science |
 | open review / review |
 | open science |
Entity | Description |
---|---|
 | materials and smart systems |
 | resource-efficient production and lightweight construction |
 | 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.
<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 … <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 … <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 … <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 … <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.
<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
Hadings in Panel tucbox-panel-info
, also with Link
<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.
<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
- You can find more examples on the Bootstrap page.
- State the column width with
col-xm-…
instead ofcol-sm-…
! - Notes on form evaluation with PHP
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>
(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: