Container

A tapp is structured in different parts. The basic elements to create a tapp in chayns design are explained below.
Every page is displayed on white background (or in dark mode). The current color scheme will be indicated through precise color accents (Icons, Headlines, Buttons, Accordion-headers).

Tapp

The tapp class adds margin and padding to the surroundings. It is designed to ensure a good looking design on both mobile and pc. It works as a container for the classes "tapp__intro" and "tapp__content".

<div class="tapp">... your tapp content...</div>

Tapp Hint

A hint will be show at the top of the tapp and can give several information to the user. The class "tapp__hint" has to be inside the "tapp" div and positioned before the "tapp__intro".

Check out this samples.

<div class="tapp">
  <div class="tapp__hint">This is a hint.</div>
  <div class="tapp__intro">
    <h1>Headline</h1>
  </div>
</div>

Tapp Intro

Every Tapp starts with a headline and an intro text, that either describe the Tapp or contain the actual content.

<div class="tapp">
  <div class="tapp__intro">
    <h1 class="headline">Headline</h1>
    <p>Description</p>
  </div>
</div>

Tapp Content

If the Tapp is more than just your intro you can add more content to this element. It provides correct margins and paddings for you as it seperates the content from the intro.

<div class="tapp">
  <div class="tapp__intro">...
  </div>
  <div class="tapp__content">
    ... Content ...
  </div>
</div>

Content Card

To add the white background to your content or any other element you just need to add this class to it. The background of tapps is darker normally.

Check out this samples.

<div class="tapp">
  <div class="tapp__intro">...
  </div>
  <div class="tapp__content">
    <div class="content__card">hightlighted content..</div>
  </div>
</div>