Navigation


Typography:

h1, .h1 - Heading first level

h2, .h2 - Heading 2nd level

h3, .h3 - Heading 3rd level

h4, .h4 - Heading 4th level
h5, .h5 - Heading 5th level
h6, .h6 - Heading 6th level
.text--big - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore esse fuga neque, nobis nulla saepe similique! Ad adipisci debitis eius eveniet ex impedit officiis, quia quisquam reprehenderit sequi vero voluptate!
.text--body - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore esse fuga neque, nobis nulla saepe similique! Ad adipisci debitis eius eveniet ex impedit officiis, quia quisquam reprehenderit sequi vero voluptate!
.text--small - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore esse fuga neque, nobis nulla saepe similique! Ad adipisci debitis eius eveniet ex impedit officiis, quia quisquam reprehenderit sequi vero voluptate!
.caption - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore esse fuga neque, nobis nulla saepe similique! Ad adipisci debitis eius eveniet ex impedit officiis, quia quisquam reprehenderit sequi vero voluptate!
.btn-text - Button text

Images media:
Settings: 
          {
            "type": "select",
            "id": "image_ratio",
            "options": [
              {
                "value": "adapt",
                "label": "Adapt to image"
              },
              {
                "value": "small",
                "label": "Small"
              },
              {
                "value": "large",
                "label": "Large"
              }
            ],
            "default": "adapt",
            "label": "Image ratio"
          }
Element: class="media media--transparent media--{{ section.settings.image_ratio }}" {% if section.settings.image_ratio == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;" {% endif %}
Square (.media.media--square)
Portrait (.media.media--portrait)
Landscape (.media.media--landscape)
Cropped (.media.media--cropped)
16/9 (.media.media--16-9)
Circle (.media.media--circle)

Form elements:
input:
Example of error message

Slideshow:
Config: (data-settings) 
<swiper-container
            class='swiper'
            data-settings='{"slidesPerView": 1}'
>
  <div class='swiper-wrapper'>
    <div class='swiper-slide'>
      <div class='media media--square'>
        {{ 'image' | placeholder_svg_tag }}
      </div>
    </div>
    <div class='swiper-slide'>
      <div class='media media--square'>
        {{ 'image' | placeholder_svg_tag }}
      </div>
    </div>
    <div class='swiper-slide'>
      <div class='media media--square'>
        {{ 'image' | placeholder_svg_tag }}
      </div>
    </div>
    <div class='swiper-slide'>
      <div class='media media--square'>
        {{ 'image' | placeholder_svg_tag }}
      </div>
    </div>
    <div class='swiper-slide'>
      <div class='media media--square'>
        {{ 'image' | placeholder_svg_tag }}
      </div>
    </div>
  </div>
</swiper-container>
Example

Section color schemes:

scheme-1 (.color-scheme-1)
Heading:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Button primary (.button)
Button primary (animated) (.button.button--animated)
Button secondary (.button.button--secondary)
Button secondary (animated) (.button.button--secondary.button--animated)
Button tertiary (.button.button--tertiary)
Link (.link)
Text button (.text-button)
Badge (.badge)
Variables:
  • --color-background: "#ffffff";
  • --color-background-secondary: "#f7f7f7";
  • --color-border: "#e5e5e5";
  • --color-foreground: "#000000";
  • --color-foreground-secondary: "#666666";
  • --color-foreground-tertiary: null;
  • --color-background-contrast: null;
  • --color-shadow: "#000000";
  • --color-button: "#000000";
  • --color-button-text: "#ffffff";
  • --color-secondary-button: "#ffffff";
  • --color-secondary-button-text: "#000000";
  • --color-link: "#000000";
  • --color-badge-foreground: "#000000";
  • --color-badge-background: "#ffffff";
  • --color-badge-border: "#000000";

scheme-2 (.color-scheme-2)
Heading:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Button primary (.button)
Button primary (animated) (.button.button--animated)
Button secondary (.button.button--secondary)
Button secondary (animated) (.button.button--secondary.button--animated)
Button tertiary (.button.button--tertiary)
Link (.link)
Text button (.text-button)
Badge (.badge)
Variables:
  • --color-background: "#f8f8f8";
  • --color-background-secondary: "#f7f7f7";
  • --color-border: "#000000";
  • --color-foreground: "#121212";
  • --color-foreground-secondary: "#666666";
  • --color-foreground-tertiary: null;
  • --color-background-contrast: null;
  • --color-shadow: "#121212";
  • --color-button: "#121212";
  • --color-button-text: "#f3f3f3";
  • --color-secondary-button: "#f8f8f8";
  • --color-secondary-button-text: "#121212";
  • --color-link: "#121212";
  • --color-badge-foreground: "#121212";
  • --color-badge-background: "#f8f8f8";
  • --color-badge-border: "#121212";

scheme-3 (.color-scheme-3)
Heading:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Button primary (.button)
Button primary (animated) (.button.button--animated)
Button secondary (.button.button--secondary)
Button secondary (animated) (.button.button--secondary.button--animated)
Button tertiary (.button.button--tertiary)
Link (.link)
Text button (.text-button)
Badge (.badge)
Variables:
  • --color-background: "#242833";
  • --color-background-secondary: "#f7f7f7";
  • --color-border: "#000000";
  • --color-foreground: "#000000";
  • --color-foreground-secondary: "#666666";
  • --color-foreground-tertiary: null;
  • --color-background-contrast: null;
  • --color-shadow: "#121212";
  • --color-button: "#ffffff";
  • --color-button-text: "#000000";
  • --color-secondary-button: "#242833";
  • --color-secondary-button-text: "#ffffff";
  • --color-link: "#ffffff";
  • --color-badge-foreground: "#000000";
  • --color-badge-background: "#242833";
  • --color-badge-border: "#000000";

scheme-4 (.color-scheme-4)
Heading:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Button primary (.button)
Button primary (animated) (.button.button--animated)
Button secondary (.button.button--secondary)
Button secondary (animated) (.button.button--secondary.button--animated)
Button tertiary (.button.button--tertiary)
Link (.link)
Text button (.text-button)
Badge (.badge)
Variables:
  • --color-background: "#121212";
  • --color-background-secondary: "#f7f7f7";
  • --color-border: "#000000";
  • --color-foreground: "#ffffff";
  • --color-foreground-secondary: "#666666";
  • --color-foreground-tertiary: null;
  • --color-background-contrast: null;
  • --color-shadow: "#121212";
  • --color-button: "#ffffff";
  • --color-button-text: "#121212";
  • --color-secondary-button: "#121212";
  • --color-secondary-button-text: "#ffffff";
  • --color-link: "#ffffff";
  • --color-badge-foreground: "#ffffff";
  • --color-badge-background: "#121212";
  • --color-badge-border: "#ffffff";

scheme-5 (.color-scheme-5)
Heading:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur autem blanditiis, dolorum eos exercitationem facere ipsum laboriosam necessitatibus, nihil non odit pariatur recusandae, sint suscipit voluptas voluptate! Culpa, eius!
Button primary (.button)
Button primary (animated) (.button.button--animated)
Button secondary (.button.button--secondary)
Button secondary (animated) (.button.button--secondary.button--animated)
Button tertiary (.button.button--tertiary)
Link (.link)
Text button (.text-button)
Badge (.badge)
Variables:
  • --color-background: "#ec1d26";
  • --color-background-secondary: "#f7f7f7";
  • --color-border: "#000000";
  • --color-foreground: "#ffffff";
  • --color-foreground-secondary: "#666666";
  • --color-foreground-tertiary: null;
  • --color-background-contrast: null;
  • --color-shadow: "#121212";
  • --color-button: "#ffffff";
  • --color-button-text: "#334fb4";
  • --color-secondary-button: "#ec1d26";
  • --color-secondary-button-text: "#ffffff";
  • --color-link: "#ffffff";
  • --color-badge-foreground: "#ffffff";
  • --color-badge-background: "#ec1d26";
  • --color-badge-border: "#ffffff";