Components

Components serve to better visualize the content and can be used directly in the markdown. They offer various configurable attributes with which they can be adapted and filled with content.

To use the components, the following code must be included at the beginning of each markdown file:

{% import "macros/macros.njk" as macros > %}

Download Component

Downloads are clearly displayed.

attributes	name	type	size
value	file name	file type	file size
example	"tuitype-web-for-desktop"	"zip"	"317kb"

{{ macros.download(name="tuitype-web-for-desktop", type="zip", size="317kb") }}

tuitype-web-for-desktop.zip, 317kb

Color Component

The "color" component clearly displays a color in the "card" or "list" layouts.

attributes	layout	use	name	hex	rgb
value	"card" or "list"	semantic name	color name	hex color code	rgb color code
example	card	primary	TUI-Red	#D40E14	212, 14, 20

Card Layout

{{ macros.color(layout="card", use="primary", name="TUI-Red", hex="#D40E14", rgb="212, 14, 20") }}

TUI-Red primary: #D40E14 212, 14, 20

List Layout

{{ macros.color(layout="list", use="primary", name="TUI-Red", hex="#D40E14", rgb="212, 14, 20") }}

TUI-Red primary: #D40E14 212, 14, 20

Figure Component

The "figure" component represents a picture form the assets folder including a caption in the form of a card.

It comes with different variants to sharpen the expression. For example, it can be used for do and don´t comparisons.

attributes	name	type	description	variant
value	image name	document type (svg as default)	text	"default", "information", "danger", "warning", "success"

{{ macros.figure(name="face-smile", description="Default", variant="default") }}

{{ macros.figure(name="face-neutral", description="Information", variant="information") }}

{{ macros.figure(name="face-worried", description="Danger", variant="danger") }}

{{ macros.figure(name="face-disappointed", description="Warning", variant="warning") }}

{{ macros.figure(name="face-smile", description="Success", variant="success") }}

Figure Component - Principles

{{ macros.figure(name="compass-pictogram", title="Supportive", description="Description", variant="principle") }}

{{ macros.figure(name="puzzle-pictogram", title="Personal", description="Description", variant="principle" ) }}

{{ macros.figure(name="partyhorn-pictogram", title="Joyful", description="Description", variant="principle") }}

{{ macros.figure(name="compass-pictogram", title="Supportive", description="Description", variant="principle-mini") }}

{{ macros.figure(name="puzzle-pictogram", title="Personal", description="Description", variant="principle-mini" ) }}

{{ macros.figure(name="partyhorn-pictogram", title="Joyful", description="Description", variant="principle-mini") }}

Icon Component

The "icon" component retrieves the corresponding icon from the tui cloud. All available icons and their names can be determined reading the Iconography.

{{ macros.icon("face-smile") }}

Image Component

{{ macros.image("family-illustration", "local") }}

Load Component

A component including responsive view is loaded into the page.

attributes	componentTag	componentSource	componentBrand
	component tag name	url	tui (default), robinson, airtours ...

{{ macros.loadComponent(componentTag="tui-search", componentSource="https://cloud.tui.com/6m/search/tui-search/master/main.js") }}

XS SM MD LG

Layout

Das Layout kann über HTML Elemente und CSS Klassen beeinflusst werden.

class name	layout
l-flex	one after the other at the same distance
l-grid	certain grid elements scaled across the given width
l-grid--2	two elemnts in a row
l-grid--3	three elements in a row

.l-flex

<div class="l-flex">...</div>

.l-grid--2

<div class="l-grid l-grid--2" style="width:480px">...</div>

Markdown

Collapsible

<details> <summary>Click to expand!</summary> your content </details>

Click to expand!

your content

Code

  <html>
  <body>
    <header>
      Header
    </header>
    <main>
      Content
    </main>
    <footer>
      Footer
    </footer>
  </body>
  </html>