-
Notifications
You must be signed in to change notification settings - Fork 4
Basic Elements
chayns® provides a lot of different elements that have a uniform style. Most elements will be highlighted by discrete colors, that adjust to the current color scheme. Here you can find information to our headline styles and list styles.
Check out this samples.
The main Tapp headline. The headline is colored in the color scheme and represents the biggest font-size in chayns design.
<h1>Sample</h1>The sub-headline is used to divide your Tapp into different areas.
<h2>Sample</h2>The small sub-headline is used to divide your text into different paragraphs.
<h3>Sample</h3>A footer is used to give additional information for content in your Tapp (e.g. a upload date below a picture).
<footer>Sample</footer>An paragraph is used to display text.
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
</p>An unordered list with black points in front of each list item.
<ul>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>An ordered list with numbers in front of each list item.
<ol>
<li>Sample 1</li>
<li>Sample 2</li>
</ol>If you want to cut your text overflow you just have to add ellipsis to your classes.
<h1 class="ellipsis">This text is tooooooooooooooooooooooo long for this row</h1>If you want to use the default font size for an element which has another font size, you can set the class default-font-size.
<!-- To get started, load the chayns API styles and JavaScript from the CDN -->
<!-- css styles -->
<script src="https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js" version="4.2"></script>
<!-- js api -->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>