{% extends "base.html" %} {% load i18n cms_tags allink_meta_tags %} {% block meta_tags %} {% render_meta_og overwrite_dict="{'meta_page_title': 'Styleguide'}" %} {% endblock meta_tags %} {% block body_class %}tpl-styleguide{% endblock %} {% block logo_addition_container %} {% endblock logo_addition_container %} {% block content %}
{% static_placeholder "styleguide" %}
{% comment %} Headings {% endcomment %}

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
{% comment %} Paragraphs {% endcomment %}

Paragraphs

Text Normal = Default Paragraph - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.

Text Small = Default Paragraph - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.

Text Large = Lead Text - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.

Text Normal = Default Paragraph - Parturient sed at ac duis semper dapibus dictumst class curabitur felis etiam eu inceptos praesent a himenaeos nec at quis enim tincidunt a volutpat hendrerit a suspendisse tempus aliquam.

{% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Kontakt" link_classes="btn btn-default" link_attributes='target="_blank"' %}

Anfahrt mit dem Auto

Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.

{% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Kontakt" link_classes="btn btn-default" link_attributes='target="_blank"' %}

{% comment %} Text-Container Text Styles {% endcomment %}

Text-Container Text Styles

Heading 1

Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.

Heading 2

Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.

Heading 3

Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.

Heading 4

Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.

Heading 5

Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.

Heading 6

Nehmen Sie die Ausfahrt Wallisellen. Beim Möbel Pfister rechts einbiegen (Hochbord Nord) und dann beim 1. Kreisel links. Sie finden uns direkt hinter dem Interio.

{% comment %} Lists {% endcomment %}

Lists

Beispiel Link innerhalb von Text (inverted colors) parturient sed at ac duis semper dapibus dictumst class curabitur

Unordered

  • Long List Item Accumsan interdum aenean ut natoque placerat vestibulum quisque habitasse dapibus cum adipiscing tortor tincidunt suspendisse platea proin fermentum vehicula ultricies nec.
  • List Item Example
  • List Item Example
  • List Item Example

Ordered

  1. Long List Item Accumsan interdum aenean ut natoque placerat vestibulum quisque habitasse dapibus cum adipiscing tortor tincidunt suspendisse platea proin fermentum vehicula ultricies nec.
  2. List Item Example
  3. List Item Example
  4. List Item Example
{% comment %} Buttons & Links {% endcomment %}

Buttons & Links

This is some text with a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="allink" link_classes="text" %} in it.

This is some text with a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="allink" link_classes="text" icon="softpage" %} in it.

This is some text with a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="allink" link_classes="text" link_attributes='target="_blank"' icon='arrow-external' %} in it.

This is a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Button" link_classes="btn btn-default" link_attributes='target="_blank"' %} in it.

This is a {% include "partials/buttons/link.html" with link_url="/en/news/" link_label="Button" link_classes="btn btn-default" link_attributes='data-trigger-softpage' icon="softpage" modal_header_title="News" %} in it.

This is a {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Button" link_classes="btn btn-default" link_attributes='target="_blank"' icon='arrow-external' %} in it.



btn (small)

{% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-sm btn-default" %} {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-sm btn-primary" %}

btn (normal)

{% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-default" %} {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-primary" %}

btn (large)

{% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-lg btn-default" %} {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-lg btn-primary" %}

btn (disabled)

{% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Default" link_classes="btn btn-default disabled " %} {% include "partials/buttons/link.html" with link_url="https://allink.ch" link_label="Primary" link_classes="btn btn-primary disabled " %}
{% comment %} Teaser {% endcomment %}

Teaser

{% include 'allink_teaser/tile/item.html' with teaser_title="Teaser title" teaser_image="" teaser_technical_title="Teaser technical title" teaser_description="Parturient sed at ac duis semper dapibus dictumst class curabitur. Parturient sed at ac duis semper dapibus dictumst class curabitur." teaser_link="https://www.allink.ch/" teaser_link_text="Read more" %}
{% include 'allink_teaser/tile/item.html' with teaser_title="Teaser title" teaser_image="" teaser_technical_title="Teaser technical title" teaser_description="Parturient sed at ac duis semper dapibus dictumst class curabitur. Parturient sed at ac duis semper dapibus dictumst class curabitur." teaser_link="https://www.allink.ch/" teaser_link_text="Read more" %}
{% comment %} Form {% endcomment %}

Form (Default)

  • Example error message
{% trans "Open Date Picker" %}
{% trans "Open Date Picker" %} {% trans "Clear Field" %}
{% trans "Open Date/Time Picker" %} {% trans "Clear Field" %}
{% trans "Open Time Picker" %} {% trans "Clear Field" %}
{% comment %} Form {% endcomment %}

Form (Inverted Colors)

{% endblock content %} {% block footer %} {% endblock footer %}