getting started

About

The showcar-ui library can be used to implement a consistent user experience for our AutoScout24 pages. The library provides several pre-defined CSS classes and components you can use to create the frontend of your web based application. The structure of all elements follows the ATOMIC DESIGN principle.

Github repository:

https://github.com/AutoScout24/showcar-ui

This documentation follows the following structure:

Getting started
: General information about showcar-ui and how to use it.
Globals:
Describing global elements like variables.
Atoms:
the basic building blocks of matter.
Molecules:
Molecules are groups of atoms bonded together.
Organisms:
Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Utilities:
Information about utility classes and layout.
Extra packages:
Here you can find more information about additional showcar-* NPM packages that can be used with showcar-ui (e.g. gallery, icons, etc.).

Label description:

Approved - Element is completely implemented and approved.
Needs review - Element is implemented and can be used but needs to be reviewed.
Needs refactoring - Element is implemented and can be used but needs improvement.
Deprecated - Don't use this element.
JS - Element depends on JavaScript (showcar-ui.js).

Usage

You can either include showcar-ui as a fragment or directly include the JS, CSS and inline HTML on your page. The library provides some HTML content that needs to be inlined on your page. Use the index.html in the dist folder as a template in order to include the inline HTML, CSS and JS on your page.

Include jigsaw fragment (prefered):

If you are using UI-Composition you can use the showcar-ui fragment by adding the following line after the beginning of the BODY tag in your HTML:

<body>
  <!--#include virtual="/fragment/assets/external/showcar-ui/showcar-ui-toggled-fragment.html" -->
</body>

Include pre-built dist files:

In case you can not use the fragment to include showcar-ui you can also include the pre-built files directly from the release branch in the github repository. In order to do so follow these steps:

1. Install showcar-ui NPM package:

npm install showcar-ui --save

2. Include the files on your page:

<html>
  <head>
    <link rel="stylesheet" href="node_modules/showcar-ui/dist/showcar-ui.css" />
  </head>
  <body>
    <script src="node_modules/showcar-ui/dist/showcar-ui.js"></script>
  </body>
</html>

CAUTION: Be aware that you will not get any polyfills if you only include the JS/CSS files. In order to make the showcar-ui library work properly cross browser you also need to include the inlined JS/CSS that we provide with our index-standalone.html file. This file can also be found in the dist folder. Please make sure you also include this html file on your page. If you need assistance please contact the Web Experience Team.

Build locally:

1. Clone repository

git clone git@github.com:AutoScout24/showcar-ui.git

2. Setup

brew install node # install node if you didn't do it before
brew install yarn # we use yarn instead of npm to manage node package dependencies
yarn global add gulp # install gulp globally
yarn install

3. Build and run

gulp build

FAQ

Feel free to ask us in slack #ug-activation or write an issue on GitHub.

Contribution

Bug reports and pull requests are welcome! Please take a look at our contribution guideline on GitHub for details.

globals

Variables

To use variables in your scss code you just need to import the specific file based on your directory structure:

    
    @import "path/to/showcar-ui/src/01-settings/variables";

GreyscaleApproved

#000
rgb(0, 0, 0)
$black-120

#333
rgb(51, 51, 51)
$black-100

#7c7c7c
rgb(124, 124, 124)
$black-70

#949494
rgb(148, 148, 148)
$black-60

#dcdcdc
rgb(220, 220, 220)
$black-30

#f4f4f4
rgb(244, 244, 244)
$black-20

#fff
rgb(255, 255, 255)
$white

Primary/SecondaryApproved

#f5f200
rgb(0, 52, 104)
$yellow-100

#F9F766
rgb(30, 76, 122)
$yellow-60

#083B78
rgb(61, 100, 140)
$blue-160

#0C4F90
rgb(91, 124, 158)
$blue-120

#1166A8
rgb(121, 149, 176)
$blue-100

Success/Warning/Error/InfoApproved

#00d0b2
rgb(217, 26, 42)
$success-100

#ccffe2
rgb(153, 23, 29)
$success-20

#f2ca26
rgb(255, 221, 220)
$warning-100

#fef9d3
rgb(33, 115, 6)
$warning-20

#e74b3c
rgb(35, 84, 19)
$error-100

#fde7d8
rgb(230, 245, 207)
$error-20

#237fff
rgb(153, 66, 0)
$info-100

#d3ecff
rgb(128, 55, 0)
$info-20

SpacingsApproved

There are several variables that should be used for the spacing inside and between elements.
Use the variables only for the spacing and not for other properties like e.g. font-sizes.

variable	value
$XS	4px
$S	8px
$M	12px
$L	16px
$XL	20px
$XXL	28px
$XXXL	40px
$XXXXL	60px

ViewportsApproved

All responsive elements that are based on media queries use the following breakpoints:

variable	value	size, from/to
$viewportS	321px	321px - 767px
$viewportM	768px	768px - 1023px
$viewportL	1024px	1024px - 1099px
$viewportXL	1100px	1100px - 1269px
$viewportXXL	1270px	1270px - ∞

Fonts and headlinesApproved

ShowCars default font-family is MakeItSans. Please use the predefined classes to increase or decrease the font size. You should not define explicit font sizes. To use the MakeItSans font, you don't have to do anything.

Font sizes

Several helper classes for font styling are available, the font sizes follow simple T-Shirt sizes.

Headlines

For styling <h*> elements please use sc-font-* classes directly. For example <h2 class='sc-font-m'>

class	font-size/line-height (viewport < 768px)	font-size/line-height (viewport >= 768px)
`.sc-font-s`	0.8125rem (13px) 1.5 (19px)	0.8125rem (13px) 1.5 (19px)
`.sc-font-m`	1rem (16px) 1.5 (24px)	1rem (16px) 1.5 (24px)
`.sc-font-l`	1.25rem (20px) 1.4 (28px)	1.25rem (20px) 1.4 (28px)
`.sc-font-xl`	1.5rem (24px) 1.3 (31px)	1.75rem (28px) 1.3 (36px)
`.sc-font-xxl`	1.75rem (28px) 1.25 (35px)	2rem (32px) 1.25 (40px)
`.sc-font-hero`	1.5rem (24px) 1.3 (31px)	2.5rem (40px) 1.2 (48px)

S Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

M Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

L Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

XL Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

XXL Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HERO Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HEADLINE2 Lorem ipsum dolor sit amet

                                <p class="sc-font-s"> S 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>
<p class="sc-font-m">M 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>
<p class="sc-font-l">L 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>
<p class="sc-font-xl">XL 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>
<p class="sc-font-xxl">XXL 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>
<p class="sc-font-hero">HERO 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>
<h2 class="sc-font-m">HEADLINE2 Lorem ipsum dolor sit amet</h2>

Show code sample

Font variationsApproved

The library also provides sc-font-bold, sc-font-silent, sc-font-uppercase and sc-font-error classes for styling.

Silent Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

BOLD Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

UPPERCASE Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

ERROR message

                                <p class="sc-font-silent">Silent 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>
<p class="sc-font-bold">BOLD 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>
<p class="sc-font-uppercase">UPPERCASE 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>
<span class="sc-font-error">ERROR message</span>

Show code sample

atoms

ButtonApproved

When to use a link or button

A link navigates the user to a new resource, taking them away from the current context. Also internal linking (jumping to another section of the current page) is allowed. The user can trigger to open the link in a new window/tab. Examples:

Navigate the user to a new page or view
Change the URL
Page jumps with internal href attributes
Deep-link client-rendered applications

A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu. Examples:

Submit form data
Opening a modal window
Triggering a popup menu
Toggling an interface
Playing media content

Usage information

Bob: Primary button, used for the most important interaction.
Ross: Secondary button, used for important interactions.
Ghost Bob: Used for less important interactions / to distinguish between the two most important interactions on a page (e.g. send e-mail and call button on the detailpage). Also useful when you need lots of them on a single page.
Ghost Ross: Used, if a single link is not prominent enough / too many Ghost Buttons are visually too “heavy”.
Marketing: For marketing purposes only e.g. banner ads from the marketing department.

                                <button class="sc-btn-bob">I am Bob!</button>
<button class="sc-btn-ross">I am Ross!</button>
<button class="sc-btn-bob-ghost">I am Ghost Bob!</button>
<button class="sc-btn-ross-ghost">I am Ghost Ross!</button>
<button class="sc-btn-marketing">I am Marketing!</button>
<button class="sc-btn-bob--inverted">I am inverted!</button>

Show code sample

Button disabledApproved

                                <button class="sc-btn-bob" disabled="">I am Bob!</button>
<button class="sc-btn-ross" disabled="">I am Ross!</button>
<button class="sc-btn-bob-ghost" disabled="">I am Ghost Bob!</button>
<button class="sc-btn-ross-ghost" disabled="">I am Ghost Ross!</button>
<button class="sc-btn-marketing" disabled="">I am Marketing!</button>

Show code sample

Button fullwidthApproved

                                <button class="sc-btn-bob sc-btn-block">I am Bob!</button>

Show code sample

Link as a buttonApproved

I am Bob! I am Ross! I am Ghost Bob! I am Ghost Ross! I am Marketing!

                                <a class="sc-btn-bob">I am Bob!</a>
<a class="sc-btn-ross">I am Ross!</a>
<a class="sc-btn-bob-ghost">I am Ghost Bob!</a>
<a class="sc-btn-ross-ghost">I am Ghost Ross!</a>
<a class="sc-btn-marketing">I am Marketing!</a>

Show code sample

Collapse more&lessApprovedJS

Collapse toggleApprovedJS

Toggle Content (closed by default)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Toggle Content (opened by default)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

                                <a data-toggle="sc-collapse" data-target="#collapse-closed">
    Toggle Content (closed by default)
</a>
<div id="collapse-closed" class="sc-collapse">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<hr>

<a data-toggle="sc-collapse" data-target="#collapse-opened">
    Toggle Content (opened by default)
</a>
<div id="collapse-opened" class="sc-collapse in">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

Show code sample

Color selector checkboxApproved

We created a special type of radio buttons and checkboxes for you to easily implement a color selection. In this case you have to write a little custom scss to define the background color of the elements. You can also choose the color of the checkmark. Therefor you have to use the color-selector-color mixin which takes the background color as first argument and the checkmark color as a second one. Please make sure you provided the second argument only as hex code.

additional scss

    
    @import "path/to/showcar-ui/src/legacy-mixins";
    .sc-color-selector {
        input.sc-input {
            &.red {
                @include color-selector-color(#ff0000, #fff);
            }
            -- gradient support --
            &.gold {
                @include color-selector-color(linear-gradient(brown, yellow, brown) gold);
            }
        }
    }

                                <div class="sc-color-selector">
    <input id="as24-cb-cp-8" type="checkbox" name="xx" class="sc-input sc-input-l blue">
    <label for="as24-cb-cp-8">blue</label>

    <input id="as24-cb-cp-9" type="checkbox" name="xx" class="sc-input sc-input-l red">
    <label for="as24-cb-cp-9">red</label>

    <input id="as24-cb-cp-10" type="checkbox" name="xx" class="sc-input sc-input-l yellow">
    <label for="as24-cb-cp-10">yellow</label>

    <input id="as24-cb-cp-11" type="checkbox" name="xx" class="sc-input sc-input-l green" disabled>
    <label for="as24-cb-cp-11">green</label>

    <input id="as24-cb-cp-12" type="checkbox" name="xx" class="sc-input sc-input-l other">
    <label for="as24-cb-cp-12">other</label>
</div>

Show code sample

Color selector radioApproved

                                <div class="sc-color-selector">
    <input id="as24-cb-cp-5" type="radio" name="xx" class="sc-input sc-input-l blue">
    <label for="as24-cb-cp-5">blue</label>

    <input id="as24-cb-cp-1" type="radio" name="xx" class="sc-input red">
    <label for="as24-cb-cp-1">red</label>

    <input id="as24-cb-cp-2" type="radio" name="xx" class="sc-input yellow">
    <label for="as24-cb-cp-2">yellow</label>

    <input id="as24-cb-cp-3" type="radio" name="xx" class="sc-input green">
    <label for="as24-cb-cp-3">green</label>

    <input id="as24-cb-cp-4" type="radio" name="xx" class="sc-input gold">
    <label for="as24-cb-cp-4">gold</label>

    <input id="as24-cb-cp-6" type="radio" name="xx" class="sc-input sc-input-l orange" disabled>
    <label for="as24-cb-cp-6">orange</label>

    <input id="as24-cb-cp-7" type="radio" name="xx" class="sc-input sc-input-l other">
    <label for="as24-cb-cp-7">other</label>
</div>

Show code sample

Custom dropdown that close when item is selectedNeeds refactoringJS

Belgien

Deutschland

Frankreich

Italien

Luxemburg

Niederlande

Spanien

Österreich

                                <custom-dropdown class="sc-input icon" checkboxgroup closeonselect>
    <div>
        <p></p>
    </div>
    <div>
        <input type="radio" id="cy-be" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="B">
        <label class="sc-block" for="cy-be">
            <as24-icon type="flag/be"></as24-icon>
            <span>Belgien</span>
        </label>
        <input type="radio" id="cy-de" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="D" checked=checked>
        <label class="sc-block" for="cy-de">
            <as24-icon type="flag/de"></as24-icon>
            <span>Deutschland</span>
        </label>
        <input type="radio" id="cy-fr" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="F">
        <label class="sc-block" for="cy-fr">
            <as24-icon type="flag/fr"></as24-icon>
            <span>Frankreich</span>
        </label>
        <input type="radio" id="cy-it" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="I">
        <label class="sc-block" for="cy-it">
            <as24-icon type="flag/it"></as24-icon>
            <span>Italien</span>
        </label>
        <input type="radio" id="cy-lu" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="L">
        <label class="sc-block" for="cy-lu">
            <as24-icon type="flag/lu"></as24-icon>
            <span>Luxemburg</span>
        </label>
        <input type="radio" id="cy-nl" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="NL">
        <label class="sc-block" for="cy-nl">
            <as24-icon type="flag/nl"></as24-icon>
            <span>Niederlande</span>
        </label>
        <input type="radio" id="cy-es" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="E">
        <label class="sc-block" for="cy-es">
            <as24-icon type="flag/es"></as24-icon>
            <span>Spanien</span>
        </label>
        <input type="radio" id="cy-at" name="cy" class="sc-hidden" placeholder="Stadt/PLZ" value="A">
        <label class="sc-block" for="cy-at">
            <as24-icon type="flag/at"></as24-icon>
            <span>Österreich</span>
        </label>
    </div>
</custom-dropdown>

Show code sample

Custom dropdown defaultNeeds refactoringJS

If the options list in the select is too big, you might need an user-friendly scrollbar: just add scrollable attribute on <custom-dropdown> tag (see examples below).

If you want to use it in a react (or preact) project you might need to use shouldComponentUpdate method to avoid unexpected state changes.
Just add it as a method of you class:

shouldComponentUpdate() { return false; }

More info & examples here: https://preactjs.com/guide/external-dom-mutations

                                <h4 class="sc-font-l sc-padding-bottom-xl">Custom dropdown without scrollbar</h4>
<custom-dropdown class="sc-input" checkboxgroup tabindex="0">
    <div>
        <p>All</p>
    </div>
    <div>
        <input type="checkbox" id="cd100" class="sc-input">
        <label for="cd100">Value1</label>
        <input type="checkbox" id="cd200" class="sc-input">
        <label for="cd200">Value2</label>
        <input type="checkbox" id="cd300" class="sc-input">
        <label for="cd300">Value2</label>
    </div>
</custom-dropdown>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- -->

<h4 class="sc-font-l sc-padding-bottom-xl">Custom dropdown with scrollbar</h4>
<custom-dropdown class="sc-input" scrollable checkboxgroup tabindex="0">
    <div>
        <p>All</p>
    </div>
    <div>
        <input type="checkbox" id="cd1" class="sc-input">
        <label for="cd1">Value1</label>
        <input type="checkbox" id="cd2" class="sc-input">
        <label for="cd2">Value2</label>
        <input type="checkbox" id="cd3" class="sc-input">
        <label for="cd3">Value3</label>

        <input type="checkbox" id="cd4" class="sc-input">
        <label for="cd4">Value4</label>
        <input type="checkbox" id="cd5" class="sc-input">
        <label for="cd5">Value5</label>
        <input type="checkbox" id="cd6" class="sc-input">
        <label for="cd6">Value6</label>

        <input type="checkbox" id="cd7" class="sc-input">
        <label for="cd7">Value7</label>
        <input type="checkbox" id="cd8" class="sc-input">
        <label for="cd8">Value8</label>
        <input type="checkbox" id="cd9" class="sc-input">
        <label for="cd9">Value9</label>

        <input type="checkbox" id="cd10" class="sc-input">
        <label for="cd10">Value10</label>
        <input type="checkbox" id="cd11" class="sc-input">
        <label for="cd11">Value11</label>
        <input type="checkbox" id="cd12" class="sc-input">
        <label for="cd12">Value12</label>

        <input type="checkbox" id="cd13" class="sc-input">
        <label for="cd13">Value13</label>
        <input type="checkbox" id="cd14" class="sc-input">
        <label for="cd14">Value14</label>
        <input type="checkbox" id="cd15" class="sc-input">
        <label for="cd15">Value15</label>

        <input type="checkbox" id="cd16" class="sc-input">
        <label for="cd16">Value16</label>
        <input type="checkbox" id="cd17" class="sc-input">
        <label for="cd17">Value17</label>
        <input type="checkbox" id="cd18" class="sc-input">
        <label for="cd18">Value18</label>

        <input type="checkbox" id="cd19" class="sc-input">
        <label for="cd19">Value19</label>
        <input type="checkbox" id="cd20" class="sc-input">
        <label for="cd20">Value20</label>
        <input type="checkbox" id="cd21" class="sc-input">
        <label for="cd21">Value21</label>

        <input type="checkbox" id="cd22" class="sc-input">
        <label for="cd22">Value22</label>
        <input type="checkbox" id="cd23" class="sc-input">
        <label for="cd23">Value23</label>
        <input type="checkbox" id="cd24" class="sc-input">
        <label for="cd24">Value24</label>
    </div>
</custom-dropdown>

Show code sample

Custom dropdown disabledNeeds refactoringJS

All

Value1

                                <custom-dropdown class="sc-input" checkboxgroup disabled>
    <div>
        <p>All</p>
    </div>
    <div>
        <input type="checkbox" id="cd1d" class="sc-input">
        <label for="cd1d">Value1</label>
    </div>
</custom-dropdown>

Show code sample

Custom dropdown with icons (multiple choice possible)Needs refactoringJS

You may use custom dropdown with any icons of your choice and style them as you wish. In this examples we added following css to style general icons from showcar-icon library:

    
    as24-icon[type^='bodytypes'] svg {
      fill: #949494;
      width: 44px;
      vertical-align: text-bottom;
    }

All

Cabrio

Coupé

Kleinwagen

Kombi

Limousine

SUV/Geländewagen

Transporter

Van

                                <custom-dropdown class="sc-input icon" checkboxgroup tabindex="0">
    <div>
        <p>All</p>
    </div>
    <div>
        <input type="checkbox" class="sc-input" id="cabrio-3">
        <label for="cabrio-3">
            <as24-icon type="bodytypes/roadster"></as24-icon>
            <span>
                Cabrio
            </span>
        </label>
        <input type="checkbox" class="sc-input" id="coupe-3">
        <label for="coupe-3">
            <as24-icon type="bodytypes/sports"></as24-icon>
            <span>
                Coupé
            </span>
        </label>
        <input type="checkbox" class="sc-input" id="compact-3">
        <label for="compact-3">
            <as24-icon type="bodytypes/compact"></as24-icon>
            <span>
                Kleinwagen
            </span>
        </label>
        <input type="checkbox" class="sc-input" id="station-3">
        <label for="station-3">
            <as24-icon type="bodytypes/station"></as24-icon>
            <span>
                Kombi
            </span>
        </label>
        <input type="checkbox" class="sc-input" id="limousine-3">
        <label for="limousine-3">
            <as24-icon type="bodytypes/limousine"></as24-icon>
            <span>
                Limousine
            </span>
        </label>
        <input type="checkbox" class="sc-input" id="offroad-3">
        <label for="offroad-3">
            <as24-icon type="bodytypes/offroad"></as24-icon>
            <span>
                SUV/Geländewagen
            </span>
        </label>
        <input type="checkbox" class="sc-input" id="delivery-3">
        <label for="delivery-3">
            <as24-icon type="bodytypes/delivery"></as24-icon>
            <span>
                Transporter
            </span>
        </label>
        <input type="checkbox" class="sc-input" id="van-3">
        <label for="van-3">
            <as24-icon type="bodytypes/van"></as24-icon>
            <span>
                Van
            </span>
        </label>
    </div>
</custom-dropdown>

Show code sample

Custom dropdown with icons (one choice possible)Needs refactoringJS

All

Cabrio

Coupé

Kleinwagen

Kombi

Limousine

SUV/Geländewagen

Transporter

Van

                                <custom-dropdown class="sc-input icon" checkboxgroup>
    <div>
        <p>All</p>
    </div>
    <div>
        <input name="custom-radio" type="radio" class="sc-hidden" id="cabrio">
        <label class="sc-block" for="cabrio">
            <as24-icon type="bodytypes/roadster"></as24-icon>
            <span>
                Cabrio
            </span>
        </label>
        <input name="custom-radio" type="radio" class="sc-hidden" id="coupe">
        <label class="sc-block" for="coupe">
            <as24-icon type="bodytypes/sports"></as24-icon>
            <span>
                Coupé
            </span>
        </label>
        <input name="custom-radio" type="radio" class="sc-hidden" id="compact">
        <label class="sc-block" for="compact">
            <as24-icon type="bodytypes/compact"></as24-icon>
            <span>
                Kleinwagen
            </span>
        </label>
        <input name="custom-radio" type="radio" class="sc-hidden" id="station">
        <label class="sc-block" for="station">
            <as24-icon type="bodytypes/station"></as24-icon>
            <span>
                Kombi
            </span>
        </label>
        <input name="custom-radio" type="radio" class="sc-hidden" id="limousine">
        <label class="sc-block" for="limousine">
            <as24-icon type="bodytypes/limousine"></as24-icon>
            <span>
                Limousine
            </span>
        </label>
        <input name="custom-radio" type="radio" class="sc-hidden" id="offroad">
        <label class="sc-block" for="offroad">
            <as24-icon type="bodytypes/offroad"></as24-icon>
            <span>
                SUV/Geländewagen
            </span>
        </label>
        <input name="custom-radio" type="radio" class="sc-hidden" id="delivery">
        <label class="sc-block" for="delivery">
            <as24-icon type="bodytypes/delivery"></as24-icon>
            <span>
                Transporter
            </span>
        </label>
        <input name="custom-radio"  type="radio" class="sc-hidden" id="van">
        <label class="sc-block" for="van">
            <as24-icon type="bodytypes/van"></as24-icon>
            <span>
                Van
            </span>
        </label>
    </div>
</custom-dropdown>

Show code sample

Disruptor SmallAPPROVED

The Disruptor Small is currently used in the main navigation only.

Modelfinder New

Car listing Kostenlos

                                <p>Modelfinder <em class="sc-disruptor-small">New</em></p>
<p>Car listing <em class="sc-disruptor-small">Kostenlos</em></p>

Show code sample

DisruptorAPPROVED

Neu Bereits über 20 Mio. Downloads!

                                <span class="sc-disruptor sc-font-uppercase">Neu</span>
<span class="sc-disruptor">Bereits über 20 Mio. Downloads!</span>

Show code sample

Google MapApproved

To use google map on your page add as24-google-map custom element on it. Please provide following data-attributes:
apikey - your google public API key (visit https://console.developers.google.com/projectselector/apis/credentials if you need to generate it)
query - location (e.g. Dingolfinger Str. 1-15 81673 München or 48.138570, 11.573496) You also have to provide height to make map interactive

.sc-google-maps--example {
    height: 300px;
}

                                <as24-google-map
    class="sc-google-maps"
    apikey="AIzaSyAY-DOCrWjyfJEFAopUh-BQZIVyrR_1Hhc"
    query="Dingolfinger Str. 1-15 81673 München"
></as24-google-map>

Show code sample

HighlightApproved

We have to versions of highlight ```sc-highlight``` and ```sc-highlight--silent```

Nebelscheinwerfer Panoramadach Xenonscheinwerfer

                                <span class="sc-highlight sc-font-s">Nebelscheinwerfer</span>
<span class="sc-highlight sc-font-s">Panoramadach</span>
<span class="sc-highlight--silent sc-font-s">Xenonscheinwerfer</span>

Show code sample

IconApproved

Usage information:

To creat an icon use this custom tag: <as24-icon type="[icon-name]"></as24-icon>. Here the value of [icon-name] placeholder defines type of icon to be used, for eg: type="android" will render an android icon. For list of all supported types, please visit icons section under extra-packages.

There is no default size for an icon. Therefore, an icon must always be used with one of the modifier from the list below to define its size.

Class	Sizes
`.sc-icon-s`	12x12 px
`.sc-icon-m`	16x16 px
`.sc-icon-l`	20x20 px
`.sc-icon-xl`	24x24 px
`.sc-icon-xxl`	40x40 px

                                
<ul>
    <l1><as24-icon class="sc-icon-s" type="android" title="android"></as24-icon></l1>
    <l1><as24-icon class="sc-icon-m" type="android" title="android"></as24-icon></l1>
    <l1><as24-icon class="sc-icon-l" type="android" title="android"></as24-icon></l1>
    <l1><as24-icon class="sc-icon-xl" type="android" title="android"></as24-icon></l1>
    <l1><as24-icon class="sc-icon-xxl" type="android" title="android"></as24-icon></l1>
</ul>

Show code sample

Inlined infoApproved

€

                                <div class="sc-inlined-info">
    <input type="text" class="sc-input" placeholder="Type car price">
    <span class="sc-inlined-info__addon">€</span>
</div>

Show code sample

CheckboxApproved

Checkbox Checkbox (disabled)

                                <input class="sc-input" id="as24-checkbox-1" type="checkbox"/>
<label for="as24-checkbox-1">Checkbox</label>

<input class="sc-input" id="as24-checkbox-2" type="checkbox" disabled/>
<label for="as24-checkbox-2">Checkbox (disabled)</label>

Show code sample

Input defaultApproved

                                <input type="text" class="sc-input" placeholder=".sc-input">

Show code sample

Input disabledApproved

                                <input type="text" class="sc-input" placeholder=".sc-input disabled" disabled>

Show code sample

Input errorApproved

                                <input type="text" class="sc-input error" placeholder=".sc-input error">

Show code sample

Input infoApproved

                                <input type="text" class="sc-input info" placeholder=".sc-input info">

Show code sample

Input successApproved

                                <input type="text" class="sc-input success" placeholder=".sc-input success">

Show code sample

Radio buttonApproved

Radio 1 Radio 2 Radio 3 (disabled)

                                <input class="sc-input" id="as24-radio-1" type="radio" name="example-radios-1">
<label for="as24-radio-1">Radio 1</label>

<input class="sc-input" id="as24-radio-2" type="radio" name="example-radios-1">
<label for="as24-radio-2">Radio 2</label>

<input class="sc-input" id="as24-radio-3" type="radio" disabled name="example-radios-1">
<label for="as24-radio-3">Radio 3 (disabled)</label>

Show code sample

Dropdown defaultApproved

                                <select class="sc-input" placeholder="sc-input">
    <option>...</option>
    <option>Value 1</option>
    <option>Value 2</option>
</select>

Show code sample

Dropdown disabledApproved

                                <select class="sc-input" disabled placeholder="sc-input disabled">
    ...
</select>

Show code sample

TextareaApproved

                                <textarea class="sc-input" placeholder=".sc-input">...</textarea>

Show code sample

ToggleApproved

                                <input type="checkbox" id="switched-on" class="sc-toggle-checkbox" checked="true"><label class="sc-toggle" for="switched-on"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-off" class="sc-toggle-checkbox"><label class="sc-toggle" for="switched-off"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-on-disabled" class="sc-toggle-checkbox" checked="true" disabled><label class="sc-toggle" for="switched-on-disabled"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-off-disabled" class="sc-toggle-checkbox" disabled><label class="sc-toggle" for="switched-off-disabled"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>
<input type="checkbox" id="switched-on-loading" class="sc-toggle-checkbox loading" checked="true"><label class="sc-toggle" for="switched-off-disabled"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>

<hr>

<label class="sc-label-left">Label left for toggles</label>
<input type="checkbox" id="switch-with-label" class="sc-toggle-checkbox" checked="true"><label class="sc-toggle" for="switch-with-label"><div class="sc-toggle-background"><as24-icon type="hook"></as24-icon></div></label>

<style>
    #toggle .sample hr {
        margin-top: 40px;
        margin-bottom: 40px;
    }
</style>

Show code sample

Labels with different inputs Deprecated

Use new spacing classes instead. (Add sc-label class to label for consistent styling.)

Label for custom dropdown

All

Value1 Value2

Label for default input Label for default dropdown Label for textarea Small label under input * small label

                                <label class="sc-label">Label for custom dropdown</label>
<custom-dropdown class="sc-input" checkboxgroup>
    <div>
        <p>All</p>
    </div>
    <div>
        <input type="checkbox" id="cd1-d" class="sc-input">
        <label for="cd1-d">Value1</label>
        <input type="checkbox" id="cd2-d" class="sc-input">
        <label for="cd2-d">Value2</label>
    </div>
</custom-dropdown>

<label class="sc-label">Label for default input</label>
<input type="text" class="sc-input" placeholder=".sc-input">

<label class="sc-label">Label for default dropdown</label>
<select class="sc-input" placeholder="sc-input">
    <option>...</option>
    <option>Value 1</option>
    <option>Value 2</option>
</select>

<label class="sc-label">Label for textarea</label>
<textarea class="sc-input" placeholder=".sc-input">...</textarea> 

<label class="sc-label">Small label under input</label>
<input type="text" class="sc-input">
<span class="sc-font-s sc-block sc-font-silent">* small label</span>

Show code sample

Lazy loading imagesApprovedJS

If you want to make you images lazy, you need to add lazyload class to your element. Once image is lazyloaded this class changes to lazyloaded.

You can add sc-lazy-image class in order to have a background color while image is loading.

Below are the examples to lazyload images within <img>, <picture> and as a background-image.

For responsive images, our recommendation is to use LQIP for page load and high resolution image should be lazyloaded. With this approach, the aspect-ratio of image is preserved and user never experience's a jank after image is lazyloaded.

To generate LQIP for your image you can use imagemagick tool for instance like: magick convert <image_name_with_ext> -resize 10% <image_name>_tn.<ext>

To support lazyloading functionality, we rely on lazysizes library.

As <img>

<data-src> has an original image inside,
<src> has an encoded 1x1 gray image to for background during loading
As <picture>

data-src has an original image in different resolutions,
src in <img> tag has a thumbnail image for background during loading

You only need to apply class="lazyload" to <img> tag
As background-image (NOT recommended, please consider two first options as a better choice)

                                <ol>
    <li>
        <h3>As <code>&lt;img&gt;</code></h3>
        <p><code>&lt;data-src&gt;</code> has an original image inside,<br /> <code>&lt;src&gt;</code> has an encoded 1x1
            gray image to for background during loading</p><br />
        <img data-src="https://placeimg.com/640/480?1"
            src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            class="sc-lazy-image lazyload" alt="small random image">
    </li>
    <li>
        <h3>As <code>&lt;picture&gt;</code></h3>
        <p><code>data-src</code> has an original image in different resolutions,<br /> <code>src</code>
            in <code>&lt;img&gt;</code> tag has a thumbnail image for background during loading</p>
        <p>You only need to apply <code>class="lazyload"</code> to <code>&lt;img&gt;</code> tag</p><br />
        <picture>
            <source media="(max-width: 480px)" data-srcset="https://loremflickr.com/300/225?lock=1" type="image/jpeg">
            <source media="(min-width: 769px)" data-srcset="https://loremflickr.com/1200/900?lock=1" type="image/jpeg">
            <img class="lazyload" data-src="https://loremflickr.com/300/225?lock=1"
                src="https://loremflickr.com/50/38?lock=1">
        </picture>
    </li>
    <li>
        <h3>As <code>background-image</code> (NOT recommended, please consider two first options as a better choice)
        </h3>
        <div class="dummy-placeholder lazyload"></div>
        <style>
            #lazy-image-target .sample .dummy-placeholder {
                width: 300px;
                height: 225px;
                background-image: url('https://placeimg.com/50/38?1');
                background-size: cover;
            }

            #lazy-image-target .sample .dummy-placeholder.lazyloaded {
                background-image: url('https://placeimg.com/2200/1650?1');
            }
        </style>
    </li>
</ol>

Show code sample

Shimmer for lazy loading elementsApproved

If you want to provide a visual indication for elements which are loaded lazily, you need to add sc-shimmer class to your element.

                                <div>
    <div class="lazy-sample-img sc-shimmer"></div>
</div>
<div>
    <div class="sample-lazy-text-block sc-shimmer"></div>
    <div class="sample-lazy-text-block sc-shimmer"></div>
    <div class="sample-lazy-text-block sc-shimmer"></div>        
</div>

<style>
#lazy-shimmer .lazy-sample-img {
    width: 300px;
    height: 200px;
}

#lazy-shimmer .sample-lazy-text-block {
    width: 100%;
    height: 20px;
    margin-top: 20px;
}
</style>

Show code sample

LightboxNeeds refactoringJS

In order to link a trigger element like a button that opens the lightbox you need to provide an id for the lightbox and add the data-lightbox-open="ID" to your trigger element.

For closing you can add the data-lightbox-close attribute to any element that should trigger closing of the lightbox.

If you need a custom identifier for your lightbox add data-custom='String' attribute to you as24-lightbox element. It will be automatically applied to div which contains overlay and content of the lightbox.

In case you need to disable closing when clicking outside the lightbox you can provide the prevent-outsideclose attribute to the as24-lightbox element like so <as24-lightbox class="sc-lightbox" id="lb1" prevent-outsideclose>.

In case you need to disable opening lightbox when clicking button that opens the lightbox, you can provide the data-lightbox-prevent-open="true" attribute. And you can switch this to data-lightbox-prevent-open="false" if you want to open it.

You can register (multiple) callbacks for when the lightbox opens/closes by calling the registerOnOpenCallback, registerOnCloseCallback methods on the <as24-lightbox> DOM element, i.e.

const myLightbox = document.getElementsByTagName("as24-lightbox")[0];
myLightbox.registerOnOpenCallback(() => console.log("open!"));

To trigger the lightbox programmatically you can use its show function like this:

const myLightbox = document.getElementsByTagName("as24-lightbox")[0];
myLightbox.show();

To trigger the lightbox programmatically you can use its hide function like this:

const myLightbox = document.getElementsByTagName("as24-lightbox")[0];
myLightbox.hide();

                                <button class="sc-btn-bob" data-lightbox-open="lb1">Try me</button>
<as24-lightbox class="sc-lightbox" id="lb1" data-custom="custom-lightbox">
	<div class="sc-lightbox__container">
		<button class="sc-lightbox__close" data-lightbox-close data-test="icon">
			<as24-icon type="close"></as24-icon>
		</button>
		<div class="sc-lightbox__content">
			<h2 class="sc-font-m sc-font-bold sc-padding-bottom-m">The modal window title</h2>
			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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>
			<label class="sc-label">The input label</label>
			<input type="text" class="sc-input" placeholder="share your thoughts with us">
			<button class="sc-btn-bob sc-btn-block sc-margin-top-l" data-lightbox-close data-test="button">Button bob</button>
			<p class="sc-font-s sc-font-silent sc-margin-top-l">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		</div>
	</div>
</as24-lightbox>

<button class="sc-btn-bob" data-lightbox-open="lb2">Try me (no outside click close)</button>
<as24-lightbox class="sc-lightbox" id="lb2" prevent-outsideclose>
	<div class="sc-lightbox__container">
		<button class="sc-lightbox__close" data-lightbox-close>
			<as24-icon type="close"></as24-icon>
		</button>
		<div class="sc-lightbox__content">
			<p>Try to close me!</p>
		</div>
	</div>
</as24-lightbox>

<button class="sc-btn-bob" data-lightbox-open="lb1" data-lightbox-prevent-open="true">Try me (data-lightbox-prevent-open="true")</button>

Show code sample

Button linkApproved

                                <button class="sc-link">Button link</button>

Show code sample

Link defaultApproved

Default link

                                <a href="#link-link">Default link</a>

Show code sample

Link inlineApproved

Inline link

                                <a href="#link-link" class="sc-inline-link">Inline link</a>

Show code sample

List decimalApproved

One
Two
Three

                                <ol class="sc-list sc-list--decimal">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

Show code sample

ListApproved

One
Two
Three

                                <ul class="sc-list sc-list--disc">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Show code sample

Popover (arrow in the middle)

Some link that will trigger the popover

                                <div style='height:350px;'>
    <div class="sc-text-center">Some <a>link</a> that will trigger the popover</div>
    <div class="sc-popover sc-popover-center">
        <button class="sc-popover__close">
            <as24-icon type="close"></as24-icon>
        </button>
        <div class="sc-popover__content">
            <h3 class="sc-font-m sc-font-bold sc-margin-top-xs">The popover title</h3>
            <p class="sc-margin-top-l">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                tempor invidunt ut labore et
                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            </p>
            <label class="sc-label">The input label</label>
            <input type="text" class="sc-input" placeholder="share your thoughts with us">
            <button class="sc-btn-bob sc-btn-block sc-margin-top-l">Button
                bob</button>

        </div>
    </div>
</div>

Show code sample

Popover (arrow on the left, default)

Some link that will trigger the popover

                                <div style='height:350px;'>
    <div>Some <a>link</a> that will trigger the popover</div>
    <div class="sc-popover">
        <button class="sc-popover__close">
            <as24-icon type="close"></as24-icon>
        </button>
        <div class="sc-popover__content">
            <h3 class="sc-font-m sc-font-bold sc-margin-top-xs">The popover title</h3>
            <p class="sc-margin-top-l">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                tempor invidunt ut labore et
                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            </p>
            <label class="sc-label">The input label</label>
            <input type="text" class="sc-input" placeholder="share your thoughts with us">
            <button class="sc-btn-bob sc-btn-block sc-margin-top-l">Button
                bob</button>

        </div>
    </div>
</div>

Show code sample

Popover (arrow on the right side)

Some link that will trigger the popover

                                <div style='height:350px;'>
    <div class="sc-text-right">Some <a>link</a> that will trigger the popover</div>
    <div class="sc-popover sc-popover-right">
        <button class="sc-popover__close">
            <as24-icon type="close"></as24-icon>
        </button>
        <div class="sc-popover__content">
            <h3 class="sc-font-m sc-font-bold sc-margin-top-xs">The popover title</h3>
            <p class="sc-margin-top-l">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                tempor invidunt ut labore et
                dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            </p>
            <label class="sc-label">The input label</label>
            <input type="text" class="sc-input" placeholder="share your thoughts with us">
            <button class="sc-btn-bob sc-btn-block sc-margin-top-l">Button
                bob</button>

        </div>
    </div>
</div>

Show code sample

Rotating arrowApprovedJS

Look at the arrow right of me!

                                <div id="myId">
    Look at the arrow right of me! <span data-toggle="arrow" data-target="#myId"></span>
</div>

Show code sample

Spinner with percentage valueApproved

How to choose spinner?

We suggest you these simple rules:

1) On blue or orange background use the semi-transparent version - sc-spinner
2) On white background use orange version - sc-spinner orange
3) On light grey background use grey version - sc-spinner grey

Note that background-color and sc-absolute-center to the div wrapper in example are added only for example styling

0%

50%

100%

                                <div class="sc-absolute-center">
  <div class="sc-spinner-value-wrapper sc-absolute-center">
    <div class="sc-spinner-loading"></div>
    <div class="sc-spinner-value sc-font-s">0%</div>
  </div>
  <div class="sc-spinner-value-wrapper sc-absolute-center">
    <div class="sc-spinner-loading orange"></div>
    <div class="sc-spinner-value sc-font-s">50%</div>
  </div>
  <div class="sc-spinner-value-wrapper sc-absolute-center">
    <div class="sc-spinner-loading grey"></div>
    <div class="sc-spinner-value sc-font-s">100%</div>
  </div>
</div>

Show code sample

SpinnerApproved

Note that background-color and sc-absolute-center class are added only for example styling

                                <div class="sc-absolute-center">
  <div class="sc-spinner-loading"></div>
  <div class="sc-spinner-loading orange"></div>
  <div class="sc-spinner-loading grey"></div>
</div>

Show code sample

StepperApprovedJS

                                <div class="sc-stepper">
    <button class="sc-stepper-button sc-stepper-button-decrement">-</button>
    <input type="number" value="0" class="sc-stepper-input" min="0" max="10" step="1"/>
    <button class="sc-stepper-button sc-stepper-button-increment">+</button>
</div>

Show code sample

Table scrollableAPPROVED

Audi 100 Coupe S	Audi 50	Audi Quattro	Audi Duemila 2000
1972	1974	1980	1983
Text	Text	Text	Text
Text	Text	Text	Text
Text	Text	Text	Text
Text	Text	Text	Text
Text	Text	Text	Text

Audi 100 Coupe S	Audi 50
1972	1974
Text	Text
Text	Text
Text	Text
Text	Text
Text	Text

                                <div class="sc-table sc-table__scrollable sc-font-m">
	<table>
		<thead>
			<th class="sc-font-bold">Audi 100 Coupe S</th>
			<th class="sc-font-bold">Audi 50</th>
			<th class="sc-font-bold">Audi Quattro</th>
			<th class="sc-font-bold">Audi Duemila 2000</th>
		</thead>
		<tbody>
			<tr>
				<td>1972</td>
				<td>1974</td>
				<td>1980</td>
				<td>1983</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
		</tbody>
	</table>
</div>

<br>
<br>
<br>

<div class="sc-table sc-table__scrollable sc-font-m">
	<table>
		<thead>
			<th class="sc-font-bold">Audi 100 Coupe S</th>
			<th class="sc-font-bold">Audi 50</th>
		</thead>
		<tbody>
			<tr>
				<td>1972</td>
				<td>1974</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
			</tr>
		</tbody>
	</table>
</div>

Show code sample

Table with left titleAPPROVED

	Audi 100 Coupe S	Audi 50	Audi Quattro	Audi Duemila 2000
Markeinführung	1972	1974	1980	1983
Motor-Bauart	Text	Text	Text	Text
Hubraum	Text	Text	Text	Text
Leistung	Text	Text	Text	Text
Antrieb	Text	Text	Text	Text
Da 0 a 100 km/h	Text	Text	Text	Text

                                <div class="sc-table sc-font-m">
	<table>
		<thead>
			<th class="sc-table__empty"></th>
			<th>Audi 100 Coupe S</th>
			<th>Audi 50</th>
			<th>Audi Quattro</th>
			<th>Audi Duemila 2000</th>
		</thead>
		<tbody>
			<tr>
				<td class="sc-table__title">Markeinführung</td>
				<td>1972</td>
				<td>1974</td>
				<td>1980</td>
				<td>1983</td>
			</tr>
			<tr>
				<td class="sc-table__title">Motor-Bauart</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td class="sc-table__title">Hubraum</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td class="sc-table__title">Leistung</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td class="sc-table__title">Antrieb</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td class="sc-table__title">Da 0 a 100 km/h</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
		</tbody>
	</table>
</div>

Show code sample

TableAPPROVED

Audi 100 Coupe S	Audi 50	Audi Quattro	Audi Duemila 2000
1972	1974	1980	1983
Text	Text	Text	Text
Text	Text	Text	Text
Text	Text	Text	Text
Text	Text	Text	Text
Text	Text	Text	Text

                                <div class="sc-table sc-font-m">
	<table>
		<thead>
			<th class="sc-font-bold">Audi 100 Coupe S</th>
			<th class="sc-font-bold">Audi 50</th>
			<th class="sc-font-bold">Audi Quattro</th>
			<th class="sc-font-bold">Audi Duemila 2000</th>
		</thead>
		<tbody>
			<tr>
				<td>1972</td>
				<td>1974</td>
				<td>1980</td>
				<td>1983</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
			<tr>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
				<td>Text</td>
			</tr>
		</tbody>
	</table>
</div>

Show code sample

Tabs with iconsApproved

Wrapper element for tabs and content should contain data-tabs atribute with uniq value. So it is possible to have more than one tabs&content elements on page.
Tabs can be used with any content of your choice.
data-section attribute on tab and content div should match.
You can also use different icons for tabs. The styles are tailored for 4 or less tabs.

There is no styling for content inside. For a search mask example with responsive behavior for content see here

Auto

Moto

Caravan

Truck

                                <div class="sc-tabs" data-tabs="example">
    <nav class="sc-tabs--with-icon">
        <button class="sc-tab--with-icon sc-tab--with-icon--active" data-section="tab-auto">
            <as24-icon type="navigation/car"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="tab-moto">
            <as24-icon type="navigation/motocycle"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="tab-caravan">
            <as24-icon type="navigation/caravan"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="tab-truck">
            <as24-icon type="navigation/truck"></as24-icon>
        </button>
    </nav>
    <div class="sc-tabs__content sc-tabs__content--visible" data-section="tab-auto">Auto</div>
    <div class="sc-tabs__content" data-section="tab-moto">Moto</div>
    <div class="sc-tabs__content" data-section="tab-caravan">Caravan</div>
    <div class="sc-tabs__content" data-section="tab-truck">Truck</div>
</div>

Show code sample

Tabs with textApproved

Tab 1 Content

Link

Tab 2 Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Tab 3 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et pulvinar eros, ut feugiat lacus. Duis convallis ligula id tempus rhoncus. Curabitur tempus metus sit amet accumsan pulvinar. Pellentesque sed aliquam nisl. Sed libero tortor, posuere quis quam sed, ultrices feugiat nulla. Fusce ullamcorper odio eget tempus rhoncus. Etiam lacinia odio quis faucibus auctor. Curabitur a velit vel nisi facilisis vulputate. Vivamus feugiat, arcu eget accumsan feugiat, purus risus aliquam justo, id fermentum mauris dolor sit amet libero. Aenean laoreet vel justo et eleifend. Nulla facilisi. Quisque sit amet arcu sit amet nibh sagittis viverra. Mauris fringilla cursus ipsum et mollis. Cras eget sapien consequat, tincidunt enim vitae, vehicula lacus. In tristique venenatis urna, nec tincidunt nisl vulputate a. Curabitur dictum neque non tempus rhoncus.

Tab 4 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et pulvinar eros, ut feugiat lacus. Duis convallis ligula id tempus rhoncus. Curabitur tempus metus sit amet accumsan pulvinar. Pellentesque sed aliquam nisl. Sed libero tortor, posuere quis quam sed, ultrices feugiat nulla. Fusce ullamcorper odio eget tempus rhoncus. Etiam lacinia odio quis faucibus auctor. Curabitur a velit vel nisi facilisis vulputate. Vivamus feugiat, arcu eget accumsan feugiat, purus risus aliquam justo, id fermentum mauris dolor sit amet libero. Aenean laoreet vel justo et eleifend. Nulla facilisi. Quisque sit amet arcu sit amet nibh sagittis viverra. Mauris fringilla cursus ipsum et mollis. Cras eget sapien consequat, tincidunt enim vitae, vehicula lacus. In tristique venenatis urna, nec tincidunt nisl vulputate a. Curabitur dictum neque non tempus rhoncus.

                                <div data-tabs-text='TabContainer' class='sc-tabs--with-text'>
    <button class="sc-inline-link sc-tab sc-tab--with-text--active sc-font-m" data-section='Tab1'>Tab 1</button>
    <div class='sc-tabs__content sc-tabs__content--visible' data-section='Tab1'>
        <p>Tab 1 Content</p>
        <a href='#'>Link</a>
    </div>
    <button class="sc-inline-link sc-tab sc-font-m" data-section='Tab2'>Tab 2</button>
    <div class='sc-tabs__content' data-section='Tab2'>
        <h3>Tab 2 Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    </div>
    <button class="sc-inline-link sc-tab sc-font-m" data-section='Tab3'>Tab 3</button>
    <div class='sc-tabs__content' data-section='Tab3'>
        <h3>Tab 3 Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et pulvinar eros, ut feugiat lacus. Duis convallis ligula id tempus rhoncus. Curabitur tempus metus sit amet accumsan pulvinar. Pellentesque sed aliquam nisl. Sed libero tortor, posuere quis quam sed, ultrices feugiat nulla. Fusce ullamcorper odio eget tempus rhoncus. Etiam lacinia odio quis faucibus auctor. Curabitur a velit vel nisi facilisis vulputate. Vivamus feugiat, arcu eget accumsan feugiat, purus risus aliquam justo, id fermentum mauris dolor sit amet libero. Aenean laoreet vel justo et eleifend. Nulla facilisi. Quisque sit amet arcu sit amet nibh sagittis viverra. Mauris fringilla cursus ipsum et mollis. Cras eget sapien consequat, tincidunt enim vitae, vehicula lacus. In tristique venenatis urna, nec tincidunt nisl vulputate a. Curabitur dictum neque non tempus rhoncus.</p>
    </div>
    <button class="sc-inline-link sc-tab sc-font-m" data-section='Tab4'>Tab 4</button>
    <div class='sc-tabs__content' data-section='Tab4'>
        <h3>Tab 4 Content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et pulvinar eros, ut feugiat lacus. Duis convallis ligula id tempus rhoncus. Curabitur tempus metus sit amet accumsan pulvinar. Pellentesque sed aliquam nisl. Sed libero tortor, posuere quis quam sed, ultrices feugiat nulla. Fusce ullamcorper odio eget tempus rhoncus. Etiam lacinia odio quis faucibus auctor. Curabitur a velit vel nisi facilisis vulputate. Vivamus feugiat, arcu eget accumsan feugiat, purus risus aliquam justo, id fermentum mauris dolor sit amet libero. Aenean laoreet vel justo et eleifend. Nulla facilisi. Quisque sit amet arcu sit amet nibh sagittis viverra. Mauris fringilla cursus ipsum et mollis. Cras eget sapien consequat, tincidunt enim vitae, vehicula lacus. In tristique venenatis urna, nec tincidunt nisl vulputate a. Curabitur dictum neque non tempus rhoncus.</p>
    </div>
</div>

Show code sample

TagApprovedJS

Germany

Italy

Austria

                                <div class="sc-tag">
    <span class="sc-tag__label">Germany</span>
    <span class="sc-tag__close">
        <as24-icon type="close"></as24-icon>
    </span>
</div>

<div class="sc-tag">
    <span class="sc-tag__label">Italy</span>
    <span class="sc-tag__close">
        <as24-icon type="close"></as24-icon>
    </span>
</div>

<div class="sc-tag">
    <span class="sc-tag__label">Austria</span>
    <span class="sc-tag__close">
        <as24-icon type="close"></as24-icon>
    </span>
</div>

Show code sample

TooltipApprovedJS

That text needs to be explained Information in tooltip link

This text has a custom triggered tooltip Show up!

                                <p>That text needs to be explained
	<as24-tooltip class="sc-tooltip" id="test-hover-tooltip">
		<as24-icon type="info" style="width: 16px;"></as24-icon>
		<span class="sc-tooltip-content">Information in tooltip <a href="/">link</a></span>
	</as24-tooltip>
</p>
<br>
<p>This text has a custom triggered tooltip
	<as24-tooltip class="sc-tooltip" id="test-event-tooltip" show-event="show-tooltip-event" hide-event="hide-tooltip-event">
		<as24-icon type="heart" style="width: 16px;"></as24-icon>
		<span class="sc-tooltip-content">Show up!</span>
	</as24-tooltip>
	<br><br>
	<button id="tooltip-show" class="sc-btn-bob">click me to show it</button>
	<button id="tooltip-hide" class="sc-btn-ross">click me to hide it</button>
</p>
<div style="margin-top: 200px">
	<as24-tooltip class="sc-tooltip" id="test-detailed-tooltip" show-event="show-detailed-tooltip" hide-event="hide-detailed-tooltip">
		<button class="sc-btn-bob">Some new feature</button>
		<div class="sc-tooltip-content">
			<h5 class="sc-font-bold">Use new feature</h5>
			<p class="sc-margin-top-s">I am here to explain to you how to use the feature!</p>
			<button class="sc-margin-top-m sc-btn-marketing" id="close-detailed-tooltip-button">OK</button>
		</div>
	</as24-tooltip>
</div>

Show code sample

molecules

BenefitApproved

Enables the author to display a variety and combination of different elements (e.g. image, text, button).

Neu Title

Item subtitle

Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin. Bresaola flank sausage shankle pork chop tri-tip, landjaeger shank cow andouille shoulder kevin corned beef.

Title

Item subtitle

Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin. Bresaola flank sausage shankle pork chop tri-tip, landjaeger shank cow andouille shoulder kevin corned beef.

Click me

                                <div class="sc-benefit">
    <div class="sc-padding-bottom-l"><as24-icon type="heart" class="sc-icon-xxl"></as24-icon></div>
    <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold"><span class="sc-disruptor sc-font-uppercase">Neu</span> Title</h3>
    <h4 class="sc-padding-bottom-s">Item subtitle</h4>
    <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin. Bresaola flank sausage shankle pork chop tri-tip, landjaeger shank cow andouille shoulder kevin corned beef.</p>
    <a class="sc-link" href="#">See more</a>
</div>

<hr>

<div class="sc-benefit">
    <div class="sc-padding-bottom-l"><as24-icon type="info" class="sc-icon-xxl"></as24-icon></div>
    <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold"> Title</h3>
    <h4 class="sc-padding-bottom-s">Item subtitle</h4>
    <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin. Bresaola flank sausage shankle pork chop tri-tip, landjaeger shank cow andouille shoulder kevin corned beef.</p>
    <a class="sc-btn-ross" href="#">Click me</a>
</div>

Show code sample

BreadcrumbsApproved

By default on views less than 500px only the last breadcrumb is shown. If you want to show another one add sc-breadcrumbs--viewport-s to <ul> element and sc-breadcrumb-item--viewport-s to <li> element you want to keep visible.

Home page
List results
Detail

Home page
List results
Detail

                                <ul class="sc-breadcrumbs">
    <li><a href="#/url/to/home" data-breadcrumb="home">Home page</a></li>
    <li><a href="#/url/to/list" data-breadcrumb="list">List results</a></li>
    <li>Detail</li>
</ul>

<ul class="sc-breadcrumbs sc-breadcrumbs--viewport-s">
    <li class="sc-breadcrumb-item--viewport-s"><a href="#/url/to/home" data-breadcrumb="home">Home page</a></li>
    <li><a href="#/url/to/list" data-breadcrumb="list">List results</a></li>
    <li>Detail</a></li>
</ul>

Show code sample

Button with IconApproved

Usage information:

This component can be used where an icon is needed insite a button. Currently, the placement of icon is on the left side w.r.t button text. This component supports all modifiers that exists in atom button.

                                <button class="sc-btn-with-icon sc-btn-with-icon--bob"><as24-icon type="search"></as24-icon>I am Bob!</button>
<button class="sc-btn-with-icon sc-btn-with-icon--ross"><as24-icon type="delete"></as24-icon>I am Ross!</button>
<button class="sc-btn-with-icon sc-btn-with-icon--bob-ghost"><as24-icon type="hook"></as24-icon>I am Ghost Bob!</button>
<button class="sc-btn-with-icon sc-btn-with-icon--ross-ghost"><as24-icon type="heart"></as24-icon>I am Ghost Ross!</button>
<button class="sc-btn-with-icon sc-btn-with-icon--marketing"><as24-icon type="attention"></as24-icon>I am Marketing!</button>

Show code sample

Button with icon disabledApproved

                                <button disabled class="sc-btn-with-icon sc-btn-with-icon--bob"><as24-icon type="search"></as24-icon>I am Bob!</button>
<button disabled class="sc-btn-with-icon sc-btn-with-icon--ross"><as24-icon type="delete"></as24-icon>I am Ross!</button>
<button disabled class="sc-btn-with-icon sc-btn-with-icon--bob-ghost"><as24-icon type="hook"></as24-icon>I am Ghost Bob!</button>
<button disabled class="sc-btn-with-icon sc-btn-with-icon--ross-ghost"><as24-icon type="heart"></as24-icon>I am Ghost Ross!</button>
<button disabled class="sc-btn-with-icon sc-btn-with-icon--marketing"><as24-icon type="attention"></as24-icon>I am Marketing!</button>

Show code sample

Button with icon fullwidthApproved

                                <button class="sc-btn-with-icon sc-btn-with-icon--bob sc-btn-with-icon--block"><as24-icon type="search"></as24-icon>I am Bob!</button>

Show code sample

Content TeaserApproved

Enables the author to display a content teaser with picture, title and text.

extra title

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.

                                <div class="sc-content-teaser">
    <a href="#" class="sc-content-teaser__pic">
        <picture>
            <source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
            <source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
            <img srcset="https://placehold.it/480x270" alt="My default image">
        </picture>
    </a>

    <div class="sc-content-teaser__content">
        <a class="sc-content-teaser__category sc-font-s">extra title</a>
        <div class="sc-content-teaser__introtext">
            <h3 class="sc-font-m sc-font-bold">Title</h3>
            <p class="sc-font-m">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
            </p>
            <a href="#" class="sc-content-teaser__linkcover"></a>
        </div>
    </div>
</div>

Show code sample

Expandable box adaptiveApproved

The adaptive version of the expandable box is opened on devices with 768px screen width and higher. On smaller devices it has a clickable arrow to expand the box.

Expandable boxes are CSS-only implementations. Thus, you have to follow the markup structure. In other words, it is important to keep the class structure like it is shown in the examples.
Note: You can spot H3 and H5 tags being used here. You can use any element according to the requirements as long as you have .sc-expandable-box__title class in place.

Look ma, I am expandable!

Hello Kitty!

                                <div class="sc-expandable-box sc-expandable-box--adaptive">
    <input id="exb3" type="checkbox" class="sc-expandable-box__toggle">
    <h3 class="sc-font-l sc-expandable-box__title"><label for="exb3" class="sc-expandable-box__label">Look ma, I am
            expandable!</label></h3>
    <div class="sc-expandable-box__content">
        Hello Kitty!
    </div>
</div>

Show code sample

Expandable boxApproved

Normal version of expandable box is opened by click on all devices.

Look ma, I am expandable!

Hello Kitty!

                                <div class="sc-expandable-box">
    <input id="exb1" type="checkbox" class="sc-expandable-box__toggle">
    <h3 class="sc-font-l sc-expandable-box__title"><label for="exb1" class="sc-expandable-box__label">Look ma, I am
            expandable!</label></h3>
    <div class="sc-expandable-box__content">
        Hello Kitty!
    </div>
</div>

Show code sample

Input group - radioApproved

Option 1 Option 2 Option 3

                                <div class="sc-input-group-radio">
    <input class="sc-input" id="as24-radio-7" name="as24-radio" type="radio">
    <label for="as24-radio-7">Option 1</label>

    <input class="sc-input" id="as24-radio-8" name="as24-radio" type="radio" checked="">
    <label for="as24-radio-8">Option 2</label>

    <input class="sc-input" id="as24-radio-9" name="as24-radio" type="radio">
    <label for="as24-radio-9">Option 3</label>
</div>

Show code sample

Input groupApproved

                                <div class="sc-input-group">
    <input class="sc-input" type="text" placeholder="Text input 1">
    <input class="sc-input" type="text" placeholder="Text input 2">
    <button class="sc-btn-bob">Submit</button>
</div>

Show code sample

Link Text BoxApproved

Enables the author to display a text plus link lists.

Hybridautos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus.

                                <div class="sc-link-text-box">
    <div class="sc-link-text-box__text">
        <h3 class="sc-link-text-box__headline">Hybridautos</h3>
        <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus.</p>
    </div>
    <div class="sc-link-text-box__links">
        <ul class="sc-unique-link-list">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">Honda</a></li>
            <li><a href="#">Mercedes</a></li>
            <li><a href="#">Ferrari</a></li>
            <li><a href="#">FCA</a></li>
            <li><a href="#">Land Rover</a></li>
            <li><a href="#">Aprilia</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">Maserati</a></li>
            <li><a href="#">Lamborghini</a></li>
            <li><a href="#">Skoda</a></li>
            <li><a href="#">Citroen</a></li>
        </ul>
    </div>
</div>

Show code sample

Link with iconApproved

You can always place an icon inside of link element and style it accordingly.
Use sc-link-with-icon class for color styling. Position and size of icon is up to you, but you may take this as example:

    
    .sc-link-with-icon--example {
        margin-top: 0;
        padding: $L;
        text-align: right;

        as24-icon {
            width: $L;
            height: $L;
            margin-right: $XS;
        }
    }

Nach Oben Delete Edit

                                <a href="#" class="sc-link-with-icon sc-link-with-icon--example">
    <as24-icon type="arrowTop"></as24-icon>
    Nach Oben
</a>
<a href="#" class="sc-link-with-icon sc-link-with-icon--example">
    <as24-icon type="delete"></as24-icon>
    Delete
</a>
<a href="#" class="sc-link-with-icon sc-link-with-icon--example">
    <as24-icon type="edit"></as24-icon>
    Edit
</a>

Show code sample

List with linksApproved

Showcar-ui library delivers styles for links display and arrow on the left. All column positioning is up to the team who is implementing it.

Responsive columns width could be achieved with flexbox or with sc-grid-col-* styling.

Example with`sc-grid-col-*`

Audi
BMW

Porsche

                                <ul class="sc-link-list">
    <li><a href="https://www.autoscout24.de/auto/audi/"><span>Audi</span></a></li>
    <li><a href="https://www.autoscout24.de/auto/bmw/"><span>BMW</span></a></li>
    <li><a href="https://www.autoscout24.de/auto/ford/"><span>Ford</span></a></li>
</ul>

<br><hr><br>
<h1>Example with<code>sc-grid-col-*</code></h1>
<br><br>

<div class="sc-grid-row">
    <ul class="sc-link-list sc-grid-col-4 sc-grid-col-s-6">
        <li><a href="https://www.autoscout24.de/auto/audi/"><span>Audi</span></a></li>
        <li><a href="https://www.autoscout24.de/auto/bmw/"><span>BMW</span></a></li>
    </ul>
    <ul class="sc-link-list sc-grid-col-4 sc-grid-col-s-6">
        <li><a href="https://www.autoscout24.de/auto/porsche/"><span>Porsche</span></a></li>
    </ul>
    <ul class="sc-link-list sc-grid-col-4 sc-grid-col-s-6 sc-hidden-s">
        <li><a href="https://www.autoscout24.de/auto/renault/"><span>Renault</span></a></li>
        <li><a href="https://www.autoscout24.de/auto/skoda/"><span>Skoda</span></a></li>
        <li><a href="https://www.autoscout24.de/auto/tesla/"><span>Tesla</span></a></li>
    </ul>
</div>

Show code sample

Media SectionApproved

Enables the author to display a media element plus text (e.g. links, list, button, etc).

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat quis ex a varius.

Audi
BMW

Porsche

                                <div class="sc-media-section">
    <picture class="sc-media-section__pic">
        <source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
        <source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
        <img srcset="https://placehold.it/480x270" alt="My default image">
    </picture>

    <div class="sc-media-section__content sc-margin-top-l">
        <h3 class="sc-font-l sc-padding-bottom-m sc-font-bold">Title</h3>
        <p class="sc-padding-bottom-xl">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Fusce volutpat quis ex a varius.
        </p>
        <div class="sc-grid-row">
            <ul class="sc-link-list sc-grid-col-4 sc-grid-col-s-6">
                <li><a href="https://www.autoscout24.de/auto/audi/"><span>Audi</span></a></li>
                <li><a href="https://www.autoscout24.de/auto/bmw/"><span>BMW</span></a></li>
            </ul>
            <ul class="sc-link-list sc-grid-col-4 sc-grid-col-s-6">
                <li><a href="https://www.autoscout24.de/auto/porsche/"><span>Porsche</span></a></li>
            </ul>
        </div>
    </div>
</div>

Show code sample

Left menu tabsApproved

                                <nav>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Default</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon sc-menu-tab__icon--success">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Success</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon sc-menu-tab__icon--info">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Info</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__icon sc-menu-tab__icon--error">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Error</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
</nav>
<br>
<nav>
    <a href="#" class="sc-menu-tab sc-inline-link sc-menu-tab--active">
        <span class="sc-menu-tab__icon">
            <as24-icon type="hook" class="sc-menu-tab__icon__hook"></as24-icon>
        </span>
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Selected</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
</nav>
<br>
<nav>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <span class="sc-menu-tab__text">
            <p class="sc-font-m sc-font-bold">Without icon</p>
            <p class="sc-font-silent sc-ellipsis sc-font-s">Description</p>
        </span>
    </a>
    <a href="#" class="sc-menu-tab sc-inline-link">
        <p class="sc-menu-tab__text sc-font-m">Title only</p>
    </a>
</nav>

Show code sample

NotificationsNeeds refactoringJS

To add notifications you need 3 elements on your page:

target container element with uniq id below which notifications are shown
<as24-notification> element that contains notification message. Should have type, id and target attributes. target should match the id of target container element
clickable element, that triggers notification to show. Should have data-trigger that reference id of <as24-notification>
data-id attribute in clickable element is deprecated, use data-trigger instead

Atributes of <as24-notification> element:

Attribute	Possible values	Description
type	success/information/error/tip	defines notification color
id	any uniq value	uniq id of notification
target	id of target element	notification anchors below the target element
title	any text	notification title
close	true/false	defines close button for the notification
timeout	value in ms	closes notification after [timeout] ms

Notifications closableNeeds refactoringJS

Notification Target container

In this example close attribute is always set to true

Success!

Close me, please.

Error here...

Tip tip hurra...

                                <as24-notification type="success" id="succ2" target="#example-notification-target" title="Success with close button" close="true">
    Success!
</as24-notification>
<as24-notification type="information" id="info2" target="#example-notification-target" title="Information for you, but without body text" close="true">
    Close me, please.
</as24-notification>
<as24-notification type="error" id="error2" target="#example-notification-target" title="Error occurred" close="true">
    Error here...
</as24-notification>
<as24-notification type="tip" id="tip2" target="#example-notification-target" title="Small Tip for you" close="true">
    Tip tip hurra...
</as24-notification>

<div class="sc-text-center">
    <button class="notification-demo sc-btn-bob" data-id="succ2" data-trigger="succ2">Show success note with cross</button>&nbsp;
    <button class="notification-demo sc-btn-ross" data-id="info2" data-trigger="info2">Toggle info note with cross</button>&nbsp;
    <button class="notification-demo sc-btn-bob" data-id="error2" data-trigger="error2">Toggle error note with cross</button>&nbsp;
    <button class="notification-demo sc-btn-ross" data-id="tip2" data-trigger="tip2">Toggle tip note with cross</button>
</div>

Show code sample

Notifications with timeoutNeeds refactoringJS

Small Notification Target container

In this example timeout attribute is always set to 2500.

Success!

Usefull info.

Error here...

Tip tip hurra...

                                <as24-notification type="success" id="succ1" target="#example-notification-target-s" title="Vehicle is added to watchlist." timeout="2500">
    Success!
</as24-notification>
<as24-notification type="information" id="info1" target="#example-notification-target-s" title="Information for you" timeout="2500">
    Usefull info.
</as24-notification>
<as24-notification type="error" id="error1" target="#example-notification-target-s" title="Error occurred" timeout="2500">
    Error here...
</as24-notification>
<as24-notification type="tip" id="tip1" target="#example-notification-target-s" title="Small Tip for you" timeout="2500">
    Tip tip hurra...
</as24-notification>

<div class="sc-text-center">
    <button class="notification-demo sc-btn-bob" data-id="succ1" data-trigger="succ1">Show success note (timeout)</button>&nbsp;
    <button class="notification-demo sc-btn-ross" data-id="info1" data-trigger="info1">Show info note (timeout)</button>&nbsp;
    <button class="notification-demo sc-btn-bob" data-id="error1" data-trigger="error1">Show error note (timeout)</button>&nbsp;
    <button class="notification-demo sc-btn-ross" data-id="tip1" data-trigger="tip1">Show tip note (timeout)</button>
</div>

Show code sample

Ordered list of linksApproved

This is an ordered list for showing a collection of links. (Currently, it only supports an even number of elements.)

Top 10 Best Cars Ever

Top 20 Best Cars Ever

                                <h1 class="sc-font-xl sc-text-center sc-ordered-link-title">Top 10 Best Cars Ever</h1>

<ol class="sc-ordered-link-list">
    <li class="sc-ordered-link-list__li"><a href="#">BMW 1</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 3</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 5</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Mercedes A</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Ferrari</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 1</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 3</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 5</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Mercedes A</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Ferrari</a></li>
</ol>

<br>
<br><hr><br>

<h1 class="sc-font-xl sc-text-center sc-ordered-link-title">Top 20 Best Cars Ever</h1>
<ol class="sc-ordered-link-list sc-ordered-link-list__long">
    <li class="sc-ordered-link-list__li"><a href="#">BMW 1</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 3</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 5</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Mercedes A</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Ferrari</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 1</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 3</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 5</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Mercedes A</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Ferrari</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 1</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 3</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 5</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Mercedes A</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Ferrari</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 1</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 3</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">BMW 5</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Mercedes A</a></li>
    <li class="sc-ordered-link-list__li"><a href="#">Ferrari</a></li>
</ol>

Show code sample

Page header with breadcrumbsApproved

Home page
List results
Detail

Gebrauchte BMW bei AutoScout24 finden

                                <div class="sc-headline-with-breadcrumbs">
    <ul class="sc-breadcrumbs">
        <li><a href="#/url/to/home" data-breadcrumb="home">Home page</a></li>
        <li><a href="#/url/to/list" data-breadcrumb="list">List results</a></li>
        <li>Detail</li>
    </ul>
    <h1 class="sc-font-xl">Gebrauchte BMW bei AutoScout24 finden</h1>
</div>

Show code sample

Page headerApproved

                                <h1 class="sc-font-xl sc-page-header">Gebrauchte BMW bei AutoScout24 finden</h1>

Show code sample

Separated list of linksApproved

This is an list for showing a collection of links.

List example

                                <div class="sc-separated-link-list">
    <h4 class="sc-separated-link-list__title sc-font-s">List example</h4>
    <ul class="sc-separated-link-list__ul">
        <li><a href="#">BMW 1</a></li>
        <li><a href="#">BMW 3</a></li>
        <li><a href="#">BMW 5</a></li>
        <li><a href="#">Mercedes A</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
</div>

Show code sample

Small FooterApproved

                                <footer class="sc-content-container sc-small-footer" role="footer">
    <div class="sc-clearfix sc-text-center sc-font-s">
        <div class="sc-pull-right">
            <a href="http://www.autoscout24.de/" target="_blank" title="Suche bei Scout24" rel="nofollow noopener">
                <as24-icon type="scout24"></as24-icon>
            </a>
            <a href="http://www.financescout24.de/" target="_blank" title="Kfz-Versicherung für Auto FinanceScout24" rel="nofollow noopener">
                <as24-icon type="auto24"></as24-icon>
            </a>
            <a href="http://www.immobilienscout24.de/" target="_blank" title="Immobilien und Wohnungen bei ImmobilienScout24" rel="nofollow noopener">
                <as24-icon type="immo24"></as24-icon>
            </a>
        </div>
        <div class="sc-pull-left">
            <p>© Copyright 2017 by AutoScout24 GmbH. Alle Rechte vorbehalten.</p>
        </div>
    </div>
</footer>

Show code sample

Small HeaderApproved

                                <header class="sc-small-header">
    <div class="sc-bar">
        <a href="https://www.autoscout24.de/">
            <as24-icon type="auto24"></as24-icon>
        </a>
    </div>
</header>

Show code sample

Unique List of LinksApproved

This is an list for showing a collection of links. They can be prefixed with an icon.
The list has no siblings (unique) and its items flow throught the available space, adapting the columns according to the user viewport.

                                <ul class="sc-unique-link-list">
    <li><a href="#">BMW 1</a></li>
    <li><a href="#">BMW 3</a></li>
    <li><a href="#">BMW 5</a></li>
    <li><a href="#">Mercedes A</a></li>
    <li><a href="#">Ferrari</a></li>
    <li><a href="#">BMW 1</a></li>
    <li><a href="#">BMW 3</a></li>
    <li><a href="#">BMW 5</a></li>
    <li><a href="#">Mercedes A</a></li>
    <li><a href="#">Ferrari</a></li>
    <li><a href="#">BMW 1</a></li>
    <li><a href="#">BMW 3</a></li>
    <li><a href="#">BMW 5</a></li>
    <li><a href="#">Mercedes A</a></li>
    <li><a href="#">Ferrari</a></li>
    <li><a href="#">BMW 1</a></li>
    <li><a href="#">BMW 3</a></li>
    <li><a href="#">BMW 5</a></li>
    <li><a href="#">Mercedes A</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

Show code sample

ValidationApproved

Provide your name

                                <input type="text" class="sc-input error" placeholder="First name">
<span class="sc-font-s sc-block sc-font-error">Provide your name</span>

Show code sample

organisms

Benefit GroupApproved

Set of benefit items in a column layout (up to 3col). It's fully responsive and covers all screensizes.

Title

Item subtitle

Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.

Title

Item subtitle

Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.

Neu Title

Item subtitle

Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.

Neu Title

Item subtitle

Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.

Title

Item subtitle

Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.

                                
<div class="sc-benefit-group">
    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="heart" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold">Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>

    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="info" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold">Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>

    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="star" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold"><span class="sc-disruptor sc-font-uppercase">Neu</span> Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>
</div>

<hr>

<div class="sc-benefit-group">
    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="info" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold"><span class="sc-disruptor sc-font-uppercase">Neu</span> Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>

    <div class="sc-benefit">
        <div class="sc-padding-bottom-l"><as24-icon type="heart" class="sc-icon-xxl"></as24-icon></div>
        <h3 class="sc-font-l sc-padding-bottom-s sc-font-bold">Title</h3>
        <h4 class="sc-padding-bottom-s">Item subtitle</h4>
        <p class="sc-padding-bottom-xxl sc-font-m">Spicy jalapeno bacon ipsum dolor amet frankfurter venison buffalo andouille, bacon boudin alcatra corned beef ham pork loin.</p>
        <a class="sc-link" href="#">See more</a>
    </div>
</div>

Show code sample

Card groupApproved

                                <div class="sc-cards">
    <input type="checkbox" id="cards-expand-1" class="sc-cards__state">
    <span class="sc-cards__list">
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
        <div class="sc-card">
            <a class="sc-card__link">
                <img class="sc-card__image" src="https://www.autoscout24.de/assets/external/home/1781/images/slices/alternative-searches/vw-golf.png.pagespeed.ce.XaNx1E3TND.png">
                <div class="sc-card__label">
                    <div>Cabrio</div>
                    <div class="sc-font-silent">25.556 Angebote</div>
                </div>
            </a>
        </div>
    </span>
    <label class="sc-cards__show" for="cards-expand-1">
        <span> Mehr anzeigen </span>
    </label>
</div>

Show code sample

Content Teaser List (with Highlight)Needs UX review

Enables the author to display a list of teasers with the highlighted item on top.

extra title

Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.

extra title

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.

extra title

Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.

extra title

Title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.

                                <div class="sc-content-teaser-list">
    <div class="sc-content-teaser">
        <a href="#" class="sc-content-teaser__pic">
            <picture>
                <source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
                <source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
                <img srcset="https://placehold.it/480x270" alt="My default image">
            </picture>
        </a>
    
        <div class="sc-content-teaser__content">
            <a class="sc-content-teaser__category sc-font-s">extra title</a>
            <div class="sc-content-teaser__introtext">
                <h3 class="sc-font-m sc-font-bold">Title 1</h3>
                <p class="sc-font-m">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
                </p>
                <a href="#" class="sc-content-teaser__linkcover"></a>
            </div>
        </div>
    </div>

    <div class="sc-content-teaser sc-content-teaser--highlighted">
        <a href="#" class="sc-content-teaser__pic">
            <picture>
                <source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
                <source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
                <img srcset="https://placehold.it/480x270" alt="My default image">
            </picture>
        </a>
    
        <div class="sc-content-teaser__content">
            <a class="sc-content-teaser__category sc-font-s">extra title</a>
            <div class="sc-content-teaser__introtext">
                <h3 class="sc-font-m sc-font-bold">Title 2</h3>
                <p class="sc-font-m">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
                </p>
                <a href="#" class="sc-content-teaser__linkcover"></a>
            </div>
        </div>
    </div>

    <div class="sc-content-teaser">
        <a href="#" class="sc-content-teaser__pic">
            <picture>
                <source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
                <source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
                <img srcset="https://placehold.it/480x270" alt="My default image">
            </picture>
        </a>
    
        <div class="sc-content-teaser__content">
            <a class="sc-content-teaser__category sc-font-s">extra title</a>
            <div class="sc-content-teaser__introtext">
                <h3 class="sc-font-m sc-font-bold">Title 3</h3>
                <p class="sc-font-m">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
                </p>
                <a href="#" class="sc-content-teaser__linkcover"></a>
            </div>
        </div>
    </div>

    <div class="sc-content-teaser">
        <a href="#" class="sc-content-teaser__pic">
            <picture>
                <source srcset="https://placehold.it/480x270" media="(min-width: 768px)">
                <source srcset="https://placehold.it/786x432" media="(min-width: 321px)">
                <img srcset="https://placehold.it/480x270" alt="My default image">
            </picture>
        </a>
    
        <div class="sc-content-teaser__content">
            <a class="sc-content-teaser__category sc-font-s">extra title</a>
            <div class="sc-content-teaser__introtext">
                <h3 class="sc-font-m sc-font-bold">Title 4</h3>
                <p class="sc-font-m">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus eu sem facilisis cursus. Pellentesque quis tincidunt nulla, et ornare dolor.
                </p>
                <a href="#" class="sc-content-teaser__linkcover"></a>
            </div>
        </div>
    </div>
</div>

Show code sample

Link Text Box GroupApproved

Collection of link text boxes.

Hybridautos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus. Curabitur nec dapibus tortor, nec sagittis neque. Vivamus bibendum vehicula sapien, pretium tincidunt nulla egestas in.

Hybridautos 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hybridautos 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus. Curabitur nec dapibus tortor, nec sagittis neque. Vivamus bibendum vehicula sapien, pretium tincidunt nulla egestas in.

Hybridautos 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus.

                                <div class="sc-link-text-box-group">
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus
                tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus. Curabitur nec dapibus tortor, nec
                sagittis neque. Vivamus bibendum vehicula sapien, pretium tincidunt nulla egestas in.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
                <li><a href="#">Mercedes A</a></li>
                <li><a href="#">Ferrari</a></li>
                <li><a href="#">FCA</a></li>
                <li><a href="#">Land Rover</a></li>
                <li><a href="#">Aprilia</a></li>
                <li><a href="#">Maserati</a></li>
                <li><a href="#">Lamborghini</a></li>
                <li><a href="#">Skora</a></li>
                <li><a href="#">Fiat</a></li>
            </ul>
        </div>
    </div>
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos 2</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
            </ul>
        </div>
    </div>
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos 3</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus
                tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus. Curabitur nec dapibus tortor, nec
                sagittis neque. Vivamus bibendum vehicula sapien, pretium tincidunt nulla egestas in.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
                <li><a href="#">Mercedes A</a></li>
                <li><a href="#">Ferrari</a></li>
                <li><a href="#">FCA</a></li>
                <li><a href="#">Land Rover</a></li>
                <li><a href="#">Aprilia</a></li>
            </ul>
        </div>
    </div>
    <div class="sc-link-text-box">
        <div class="sc-link-text-box__text">
            <h3 class="sc-link-text-box__headline">Hybridautos 4</h3>
            <p class="sc-link-text-box__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt blandit elementum. Nam et orci at lacus
                tincidunt suscipit et vitae tellus. Nam vel ornare dolor, id porta lectus.</p>
        </div>
        <div class="sc-link-text-box__links">
            <ul class="sc-unique-link-list">
                <li><a href="#">BMW 1</a></li>
                <li><a href="#">BMW 3</a></li>
                <li><a href="#">Honda</a></li>
                <li><a href="#">Mercedes A</a></li>
                <li><a href="#">Ferrari</a></li>
                <li><a href="#">FCA</a></li>
            </ul>
        </div>
    </div>
</div>

Show code sample

Media Section ListApproved

Collection of media sections.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat quis ex a varius.

Link to section

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce volutpat quis ex a varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat quis ex a varius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat quis ex a varius.

Title

Neu Bereits über 20 Mio. Downloads!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat quis ex a varius.

                                <div class="sc-media-section-list">
    <div class="sc-media-section">
        <picture class="sc-media-section__pic">
            <source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
            <source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
            <img srcset="https://placehold.it/480x270" alt="My default image">
        </picture>
    
        <div class="sc-media-section__content sc-margin-top-l">
            <h3 class="sc-font-l sc-padding-bottom-m sc-font-bold">Title</h3>
            <p class="sc-padding-bottom-xl">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Fusce volutpat quis ex a varius.
            </p>
            <a href="#">Link to section</a>
        </div>
    </div>

    <div class="sc-media-section sc-media-section--reverse">
        <picture class="sc-media-section__pic">
            <source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
            <source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
            <img srcset="https://placehold.it/480x270" alt="My default image">
        </picture>
    
        <div class="sc-media-section__content sc-margin-top-l">
            <h3 class="sc-font-l sc-padding-bottom-m sc-font-bold">Title</h3>
            <ul class="sc-list sc-list--disc">
                <li>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                </li>
                <li>
                    Fusce volutpat quis ex a varius.
                </li>
                <li>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Fusce volutpat quis ex a varius.
                </li>
            </ul>
        </div>
    </div>

    <div class="sc-media-section">
        <picture class="sc-media-section__pic">
            <source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
            <source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
            <img srcset="https://placehold.it/480x270" alt="My default image">
        </picture>
    
        <div class="sc-media-section__content sc-margin-top-l">
            <p class="sc-padding-bottom-xl">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Fusce volutpat quis ex a varius.
            </p>
            <button class="sc-btn-bob">I am Bob!</button>
            <button class="sc-btn-ross">I am Ross!</button>
        </div>
    </div>

    <div class="sc-media-section sc-media-section--reverse">
        <picture class="sc-media-section__pic">
            <source srcset="https://placehold.it/480x270" media="(min-width: 1024px)">
            <source srcset="https://placehold.it/768x432" media="(min-width: 600px)">
            <img srcset="https://placehold.it/480x270" alt="My default image">
        </picture>
    
        <div class="sc-media-section__content sc-margin-top-l">
            <h3 class="sc-font-l sc-padding-bottom-m sc-font-bold">Title</h3>
            <span class="sc-disruptor sc-font-uppercase">Neu</span>
            <span class="sc-disruptor">Bereits über 20 Mio. Downloads!</span>
            <p class="sc-padding-bottom-xl sc-margin-top-m">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Fusce volutpat quis ex a varius.
            </p>
        </div>
    </div>
</div>

Show code sample

Navigation v2JS

This is the current navigation component. It uses flex-box for layout and is based on mobile-first approach. Navigation on dealer pages (repo) is also based on this component.

Skip to main content

                                <a class="skip-main" href="#main-target">Skip to main content</a>
<header class="sc-navigation-v2" role="navigation">
    <div class="bar">
        <button class="sc-btn-mobile-menu" aria-expanded="false"><span></span>Menu</button>
        <a href="https://www.autoscout24.de" class="icon-auto24">
            <as24-icon type="auto24"></as24-icon>
        </a>
    </div>
    <nav aria-label="mainmenu">
        <ul class="left">
            <li>
                <a href="http://google.de/" target="_blank">Suchen</a>
            </li>

            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Verkaufen</button>
                <div class="submenu">
                    <span class="subheadline">I am small text</span>
                    <a href="#navigation-v2">Menu 1 Link 1</a>
                    <a href="#navigation-v2">Menu 1 Link<em class="sc-disruptor-small"> New</em></a>
                    <a href="#navigation-v2">Menu 1 Link 3</a>
                </div>
            </li>

            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Informieren</button>
                <span class="subtitle">You place me below top level link. I will be truncated</span>
                <div class="submenu extended">
                    <div>
                        <span class="subheadline">Left header</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Right Header</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                </div>
            </li>

            <li class="left-flyout">
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Finanzieren</button>
                <div class="submenu extended">
                    <div>
                        <span class="subheadline">Submenu 1</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Submenu 2</span>
                        <a href="#navigation-v2">Submenu 2 Link 1</a>
                        <a href="#navigation-v2">Submenu 2 Link 2</a>
                        <a href="#navigation-v2">Submenu 2 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Submenu 3</span>
                        <a href="#navigation-v2">Submenu 3 Link 1</a>
                        <a href="#navigation-v2">Submenu 3 Link 2</a>
                        <a href="#navigation-v2">Submenu 3 Link 3</a>
                    </div>
                </div>
            </li>
        </ul>

        <ul class="right left-flyout">
            <li class="myaccount">
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Mein Konto</button>
                <span class="subtitle">I am small text</span>
                <div class="submenu visible-on-mobile">
                    <a href="#navigation-v2">Right menu Link 1 (<span>0</span>)</a>
                    <a href="#navigation-v2">Right menu Link 2</a>
                    <a href="#navigation-v2">Right menu Link 3</a>
                    <button href="#navigation-v2" class="sc-btn-ross sc-btn-block button-with-subtitle">Button Link</button>
                    <span>Small Tagline?
                        <a href="#navigation-v2" class="sc-link">Click me</a>
                    </span>
                    <span class="separator"></span>
                    <a href="#navigation-v2">Another link</a>
                </div>
            </li>

            <li class="country-selector">
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false"><as24-icon type="flag/de"></as24-icon></button>
                <div class="submenu">
                        <a href="#navigation-v2">
                            <as24-icon type="flag/de"></as24-icon><span>Deutschland</span>
                        </a>
                        <a href="#navigation-v2">
                            <as24-icon type="flag/be"></as24-icon><span>België/Belgique</span>
                        </a>
                    <span>—</span>
                    <a href="#navigation-v2">Български</a>
                    <a href="#navigation-v2">Česky</a>
                </div>
            </li>
        </ul>
    </nav>
</header>
<span id="main-target"></span>

Show code sample

Navigation v2 - Variation1JS

It shows a layout where right menu has slightly different menu options.

Skip to main content

                                <a class="skip-main" href="#main-target">Skip to main content</a>
<header class="sc-navigation-v2" role="navigation">
    <div class="bar">
        <button class="sc-btn-mobile-menu"><span></span>Menu</button>
        <a href="https://www.autoscout24.de" class="icon-auto24">
            <as24-icon type="auto24"></as24-icon>
        </a>
    </div>
    <nav aria-label="mainmenu">
        <ul class="left">
            <li>
                <a href="http://google.de/" target="_blank">Link Without Subnav</a>
            </li>

            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Menu 1</button>
                <span class="subtitle">I am small text</span>
                <div class="submenu">
                    <a href="#navigation-v2">Menu 1 Link 1</a>
                    <a href="#navigation-v2">Menu 1 Link 2<em class="sc-disruptor-small"> New</em></a>
                    <a href="#navigation-v2">Menu 1 Link 3</a>
                </div>
            </li>

            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Sub menu Right</button>
                <span class="subtitle">You place me below top level link. I will be truncated</span>
                <div class="submenu extended">
                    <div>
                        <span class="subheadspanne">Left header</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Right Header</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                </div>
            </li>

            <li class="left-flyout">
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Submenu Left</button>
                <div class="submenu extended">
                    <div>
                        <span class="subheadline">Submenu 1</span>
                        <a href="#navigation-v2">Submenu 1 Link 1</a>
                        <a href="#navigation-v2">Submenu 1 Link 2</a>
                        <a href="#navigation-v2">Submenu 1 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Submenu 2</span>
                        <a href="#navigation-v2">Submenu 2 Link 1</a>
                        <a href="#navigation-v2">Submenu 2 Link 2</a>
                        <a href="#navigation-v2">Submenu 2 Link 3</a>
                    </div>
                    <div>
                        <span class="subheadline">Submenu 3</span>
                        <a href="#navigation-v2">Submenu 3 Link 1</a>
                        <a href="#navigation-v2">Submenu 3 Link 2</a>
                        <a href="#navigation-v2">Submenu 3 Link 3</a>
                    </div>
                </div>
            </li>
        </ul>

        <ul class="right left-flyout">
            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Right Menu</button>
                <div class="submenu">
                    <a href="#">Right menu Link 1</a>
                    <a href="#">Right menu Link 2</a>
                    <a href="#">Right menu Link 3</a>
                    <span class="separator"></span>
                    <a rel="nofollow" href="#">Another Link</a>
                </div>
            </li>

            <li class="country-selector">
                <button class="title sc-inline-link sc-btn-block aria-haspopup="true" aria-expanded="false""><as24-icon type="flag/de"></as24-icon></button>
                <div class="submenu">
                        <a href="#navigation-v2">
                            <as24-icon type="flag/de"></as24-icon><span>Deutschland</span>
                        </a>
                        <a href="#navigation-v2">
                            <as24-icon type="flag/be"></as24-icon><span>België/Belgique</span>
                        </a>
                    <span>—</span>
                    <a href="#navigation-v2">Български</a>
                    <a href="#navigation-v2">Česky</a>
                </div>
            </li>
        </ul>
    </nav>
</header>
<span id="#main-target"></span>

Show code sample

Navigation v2 - Variation2JS

Layout with minimal links on left and right navigation.

Skip to main content

                                <a class="skip-main" href="#main-target">Skip to main content</a>
<header class="sc-navigation-v2" role="navigation">
    <div class="bar">
        <button class="sc-btn-mobile-menu"><span></span>Menu</button>
        <a href="https://www.autoscout24.de" class="icon-auto24">
            <as24-icon type="auto24"></as24-icon>
        </a>
    </div>
    <nav aria-label="mainmenu">
        <ul class="left">
            <li>
                <a href="http://google.de/">Link Without Subnav 1</a>
            </li>

            <li>
                <a href="http://google.de/">Link Without Subnav 2</a>
            </li>
            
            <li>
                <a href="http://google.de/">Link Without Subnav 3</a>
            </li>
        </ul>

        <ul class="right left-flyout">
            <li>
                <button class="title sc-inline-link sc-btn-block" aria-haspopup="true" aria-expanded="false">Right Menu</button>
                <div class="submenu">
                        <a href="#navigation-v2-variation2">Right menu Link 1 (<span>0</span>)</a>
                        <a href="#navigation-v2-variation2">Right menu Link 2 (<span>0</span>)</a>
                </div>
            </li>

            <li class="country-selector">
                <button class="title sc-inline-link sc-btn-block aria-haspopup="true" aria-expanded="false""><as24-icon type="flag/de"></as24-icon></button>
                <div class="submenu">
                        <a href="#navigation-v2">
                            <as24-icon type="flag/de"></as24-icon><span>Deutschland</span>
                        </a>
                        <a href="#navigation-v2">
                            <as24-icon type="flag/be"></as24-icon><span>België/Belgique</span>
                        </a>
                    <span>—</span>
                    <a href="#navigation-v2">Български</a>
                    <a href="#navigation-v2">Česky</a>
                </div>
            </li>
        </ul>
    </nav>
</header>
<span id="#main-target"></span>

Show code sample

Pagination ApprovedJS

If you want to use the pagination component, you need to add the ul element with the sc-pagination class as shown below and the corresponding javascript snippet.
In order to change default english previous/next text on buttons please provide attributes data-previous-text and data-next-text on <ul> element.

You need the following properties to instantiate the "Pager":

The name of the "root" element (in fact you can use document.querySelector('.sc-pagination') to obtain the right element)
Number of items per page (itemsPerPage)
The currently active page (activePage)
Total number of items (totalCount)
The url-template which is used for the a-tag (urlTemplate) with the {page} and the {size} placeholders.
(Optional) If you want to use pagination without page limit provide unlimited property true. Otherwise you will be limited by 20 pages.
The {size} placeholder hold the value for the items per page. The {page} placeholder will be filled with the currently active page.

                                <ul class="sc-pagination" data-previous-text="Zurück" data-next-text="Weiter"></ul>

Show code sample

                                // This needs to be build in your webpack:

(function () {
    var paginationElement = document.querySelector('.sc-pagination'),
        itemsPerPage = 20,
        activePage = 1,
        totalCount = 700,
        urlTemplate = 'http://www.autoscout24.com/listWithPagination?page={page}&size={size}',
        unlimited = true;

        if (paginationElement) {
        new Pager(paginationElement, itemsPerPage, activePage, totalCount, urlTemplate, unlimited);
        }
})();

Show js sample

Search mask contentApproved

Neu Gebraucht Tageszulassung

Weitere Suchoptionen

                                
<div class="sc-search__wrapper sc-tabs" data-tabs="search">
    <div class="sc-search__content sc-tabs__content sc-tabs__content--visible">
        <div class="sc-search__options sc-hidden-at-s">
            <input class="sc-input" id="seach-new" type="checkbox" checked/>
            <label for="seach-new">Neu</label>
            <input class="sc-input" id="seach-used" type="checkbox" checked/>
            <label for="seach-used">Gebraucht</label>
            <input class="sc-input" id="seach-daily-admission" type="checkbox"/>
            <label for="seach-daily-admission">Tageszulassung</label>
        </div>
        <div class="sc-search__filter-wrapper">
            <select class="sc-input">
                <option>Marke</option>
                <option>...</option>
            </select>
            <select class="sc-input" disabled>
                <option>Modell</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Erstzulassung ab</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Preis bis (€)</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Alle Länder</option>
                <option>...</option>
            </select>
            <input type="text" class="sc-input" placeholder="Stadt/PLZ">
            <div class="sc-search__content__actions">
                <button class="sc-btn-bob sc-btn-block">Absenden</button>
                <a class="sc-search__link">Weitere Suchoptionen</a>
            </div>
        </div>
    </div>
</div>

Show code sample

Search maskApproved

The search mask uses tabs element for show/hide logic. See here

All the sc-search-* classes are used only for styling (include responsive behavior).

Neu Gebraucht Tageszulassung

Weitere Suchoptionen

Moto

Caravan

Truck

                                <div class="sc-search__wrapper sc-tabs" data-tabs="search">
    <nav class="sc-tabs--with-icon">
        <button class="sc-tab--with-icon sc-tab--with-icon--active" data-section="search-auto">
            <as24-icon type="navigation/car"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="search-moto">
            <as24-icon type="navigation/motocycle"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="search-caravan">
            <as24-icon type="navigation/caravan"></as24-icon>
        </button>
        <button class="sc-tab--with-icon" data-section="search-truck">
            <as24-icon type="navigation/truck"></as24-icon>
        </button>
    </nav>
    <div class="sc-search__content sc-tabs__content sc-tabs__content--visible" data-section="search-auto">
        <div class="sc-search__options sc-hidden-at-s">
            <input class="sc-input" id="seach-new" type="checkbox" checked/>
            <label for="seach-new">Neu</label>
            <input class="sc-input" id="seach-used" type="checkbox" checked/>
            <label for="seach-used">Gebraucht</label>
            <input class="sc-input" id="seach-daily-admission" type="checkbox"/>
            <label for="seach-daily-admission">Tageszulassung</label>
        </div>
        <div class="sc-search__filter-wrapper">
            <select class="sc-input">
                <option>Marke</option>
                <option>...</option>
            </select>
            <select class="sc-input" disabled>
                <option>Modell</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Erstzulassung ab</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Preis bis (€)</option>
                <option>...</option>
            </select>
            <select class="sc-input">
                <option>Alle Länder</option>
                <option>...</option>
            </select>
            <input type="text" class="sc-input" placeholder="Stadt/PLZ">
            <div class="sc-search__content__actions">
                <button class="sc-btn-bob sc-btn-block">Absenden</button>
                <a class="sc-search__link">Weitere Suchoptionen</a>
            </div>
        </div>
    </div>
    <div class="sc-search__content sc-tabs__content" data-section="search-moto">Moto</div>
    <div class="sc-search__content sc-tabs__content" data-section="search-caravan">Caravan</div>
    <div class="sc-search__content sc-tabs__content" data-section="search-truck">Truck</div>
</div>

Show code sample

Separated Link List GroupApproved

This is an Anchor List Group for showing a collection of anchor lists. They can also be prefixed with an icon.

Title comes here

                                <div class="sc-separated-link-list-group">

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

    <div class="sc-separated-link-list">
        <h4 class="sc-separated-link-list__title sc-font-s">Title comes here</h4>
        <ul class="sc-separated-link-list__ul">
            <li><a href="#">BMW 1</a></li>
            <li><a href="#">BMW 3</a></li>
            <li><a href="#">BMW 5</a></li>
            <li><a href="#">Mercedes A</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    </div>

</div>

Show code sample

Spy Navigation Needs refactoringJS

Make sure you always set the target for each navigation link by providing the data-href attribute as shown in the code example below. The target element itself needs to be an anchor tag with the `id` set to the value that you set in the data-href attribute. The anchor tag defines the start of the section you want to jump to or select when scrolling there.

Important note: old links with name attribute are still valid, but we suggest you to use id instead as a HTML5 compatible.

Section 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section 5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

                                <div id="page-subnav-stick"></div>
<div class="sc-spy-navigation" data-stick-when="#page-subnav-stick">
    <div class="sc-grid-row">
        <div class="sc-grid-col-12">
            <div class="sc-spy-navigation__wrapper">
                <nav class="sc-spy-navigation__links">
                    <a class="sc-spy-navigation__link" href="#" data-href="section-1">Section 1</a>
                    <a class="sc-spy-navigation__link" href="#" data-href="section-2">Section 2</a>
                    <a class="sc-spy-navigation__link" href="#" data-href="section-3">Section 3</a>
                    <a class="sc-spy-navigation__link" href="#" data-href="section-4">Section 4</a>
                    <a class="sc-spy-navigation__link" href="#" data-href="section-5">Section 5</a>
                </nav>
                <div class="sc-spy-navigation__toggle"></div>
            </div>
        </div>
    </div>
</div>

<!--example content - DON'T COPY & PASTE-->
<br>
<br>
<br>

<a id="section-1">Section 1</a>
<div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
</div>

<br>
<br>
<br>

<a id="section-2">Section 2</a>
<div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
</div>

<br>
<br>
<br>

<a id="section-3">Section 3</a>
<div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
</div>

<br>
<br>
<br>

<a id="section-4">Section 4</a>
<div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
</div>

<a id="section-5">Section 5</a>
<div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
    dolor sit amet.
</div>
<!--example content - DON'T COPY & PASTE-->

Show code sample

                                // This component have to be initialized with an object with two functions:

// Each function takes 3 arguments:
// scrollTop - scroll amount
// stickToElem - the element to which the navigation should stick to
// componentElem - the component element (the one with the root class ".sc-spy-navigation")

showcar.spyNavigation({
    stickPosFn: function(scrollTop, stickToElem, componentElem) {
        // Define when the navigation should be sticky, return Boolean
    },
    unstickPosFn: function(scrollTop, stickToElem, componentElem) {
        // Define when the navigation should not be sticky, return Boolean
    }
});

// Example
const stickyYStartPosition = $('.sc-spy-navigation').offset().top;

showcar.spyNavigation({
    stickPosFn: (scrollTop, stickToElem, componentElem) => scrollTop > stickyYStartPosition,
    unstickPosFn: (scrollTop, stickToElem, componentElem) => scrollTop <= stickyYStartPosition
});

Show js sample

SuperheroApproved

This is the new Superhero. It replaces the old one (see below). The main difference is the orange border above the headline.

The superhero enables the author to display a variety of different elements (e.g. image, text, button) on the very top of the page. It's fully responsive and therefore covers all screensizes. The text is black per default but in case of dark pictures, you may want to use white color for M/L views (on S it's always black): put the class name sc-superhero__content--light on sc-superhero__content container (see third example).

Fahrzeugbewertung

Bringen Sie Ihr Auto groß raus.

Mit dem richtigen Preis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.

Fahrzeugbewertung

Bringen Sie Ihr Auto groß raus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.

I am Bob!

Fahrzeugbewertung

Bringen Sie Ihr Auto groß raus.

Mit dem richtigen Preis.

One
Two
Three

Fahrzeugbewertung

Bringen Sie Ihr Auto groß raus.

Mit dem richtigen Preis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.

Marke Modell Erstzulassung Kraftstoff Ort

                                <!-- 
  ************
    EXAMPLE 1 
  ************
-->

<style>
  .sc-superhero__imgs {
    background-image: url('https://via.placeholder.com/480x270');
  }

  @media screen and (min-width: 768px) {
    .sc-superhero__imgs {
      background-image: none;
    }

    .sc-superhero {
      background-image: url('https://via.placeholder.com/768x432');
    }
  }

  @media screen and (min-width: 1024px) {
    .sc-superhero {
      background-image: url('https://via.placeholder.com/1100x430');
    }
  }

  h2.sc-superhero__title--branded {
    margin-bottom: 0 !important;
    font-size: 20px !important;
  }
</style>

<div class="sc-superhero">
  <div class="sc-superhero__imgs"></div>
  <div class="sc-superhero__content">
    <h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
    <h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
    <h4 class="sc-font-xl">Mit dem richtigen Preis.</h4>
    <p class="s-font-l sc-margin-top-m">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.
    </p>
  </div>
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 2 
  ************
-->

<style>
  .sc-superhero__imgs {
    background-image: url('https://via.placeholder.com/480x270');
  }

  @media screen and (min-width: 768px) {
    .sc-superhero__imgs {
      background-image: none;
    }

    .sc-superhero {
      background-image: url('https://via.placeholder.com/768x432');
    }
  }

  @media screen and (min-width: 1024px) {
    .sc-superhero {
      background-image: url('https://via.placeholder.com/1100x430');
    }
  }

  h2.sc-superhero__title--branded {
    margin-bottom: 0 !important;
    font-size: 20px !important;
  }
</style>

<div class="sc-superhero">
  <div class="sc-superhero__imgs"></div>
  <div class="sc-superhero__content">
    <h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
    <h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
    <p class="s-font-l sc-margin-top-m">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.
    </p>
    <p>
      <a href="#superhero" class="sc-btn-bob sc-margin-top-xl">I am Bob!</a>
    </p>
  </div>
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 3 
  ************
-->

<style>
  .sc-superhero__imgs {
    background-image: url('https://via.placeholder.com/480x270');
  }

  @media screen and (min-width: 768px) {
    .sc-superhero__imgs {
      background-image: none;
    }

    .sc-superhero {
      background-image: url('https://via.placeholder.com/768x432');
    }
  }

  @media screen and (min-width: 1024px) {
    .sc-superhero {
      background-image: url('https://via.placeholder.com/1100x430');
    }
  }

  h2.sc-superhero__title--branded {
    margin-bottom: 0 !important;
    font-size: 20px !important;
  }
</style>

<div class="sc-superhero">
  <div class="sc-superhero__imgs"></div>
  <div class="sc-superhero__content sc-superhero__content--light">
    <h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
    <h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
    <h4 class="sc-font-xl">Mit dem richtigen Preis.</h4>
    <ul class="sc-list sc-list--disc sc-margin-top-m">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 4 
  ************
-->

<style>
  .sc-superhero__imgs {
    background-image: url('https://via.placeholder.com/480x270');
  }

  @media screen and (min-width: 768px) {
    .sc-superhero__imgs {
      background-image: none;
    }

    .sc-superhero {
      background-image: url('https://via.placeholder.com/768x432');
    }
  }

  @media screen and (min-width: 1024px) {
    .sc-superhero {
      background-image: url('https://via.placeholder.com/1100x430');
    }
  }

  h2.sc-superhero__title--branded {
    margin-bottom: 0 !important;
    font-size: 20px !important;
  }
</style>

<div class="sc-superhero">
  <div class="sc-superhero__imgs"></div>
  <div class="sc-superhero__wrapper">
    <div class="sc-superhero__content">
      <h2 class="sc-superhero__title--branded sc-font-l sc-margin-top-m">Fahrzeugbewertung</h2>
      <h3 class="sc-font-xl sc-font-bold">Bringen Sie Ihr Auto groß raus.</h3>
      <h4 class="sc-font-xl">Mit dem richtigen Preis.</h4>
      <p class="s-font-l sc-margin-top-m">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.
      </p>
    </div>
    <div class="sc-superhero__input--wrapper">
      <div class="sc-superhero__input--content">
        <label class="sc-label">Marke</label>
        <select class="sc-input">
          <option>Please select</option>
          <option>...</option>
        </select>
        <label class="sc-label">Modell</label>
        <select class="sc-input" disabled>
          <option>Please select</option>
          <option>...</option>
        </select>
        <label class="sc-label">Erstzulassung</label>
        <select class="sc-input" disabled>
          <option>Jahr</option>
          <option>...</option>
        </select>
        <label class="sc-label">Kraftstoff</label>
        <select class="sc-input" disabled>
          <option>Please select</option>
          <option>...</option>
        </select>
        <label class="sc-label">Ort</label>
        <input type="text" class="sc-input" placeholder="Stadt/PLZ">
        <button class="sc-btn-bob sc-btn-block sc-margin-top-xxl">Absenden</button>
      </div>
    </div>
  </div>
</div>

Show code sample

SuperheroDeprecated

This is the old superhero.

Neu

Title for Superhero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, non sodales arcu erat non tortor.

One
Two
Three

* some footnotes

Neu

Title for Superhero that is quite long

Title for Superhero

Lorem ipsum dolor sit amet, consectetur adipiscing.

Neu

Title for Superhero

That text needs to be explaned Information in tooltip link

* some footnotes

                                <!-- 
  ************
    EXAMPLE 1 
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs">
      <a href="#">
        <img src="/showcar-ui/docs/assets/images/showcar-logo-superhero.jpg">
      </a>
    </div>

    <div class="sc-superhero__content sc-superhero__content--light">
      <span class="sc-disruptor sc-font-uppercase">Neu</span>
      <h2 class="sc-superhero__title sc-margin-top-m">Title for Superhero</h2>
      <p class="sc-padding-bottom-xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, 
          non sodales arcu erat non tortor.
      </p>
      <ul class="sc-list sc-list--disc sc-padding-bottom-xl">
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
      </ul>
      <button class="sc-btn-bob">I am Bob!</button>
      <span class="sc-block sc-margin-top-xxl sc-font-s">* some footnotes</span>
    </div>
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 2
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs">
      <a href="#">
        <img src="/showcar-ui/docs/assets/images/showcar-logo-superhero.jpg">
      </a>
    </div>

    <div class="sc-superhero__content sc-superhero__content--light">
      <span class="sc-disruptor sc-font-uppercase">Neu</span>
      <h3 class="sc-superhero__title sc-margin-top-m">Title for Superhero that is quite long</h3>
    </div>
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 3
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs">
      <a href="#">
        <img src="/showcar-ui/docs/assets/images/showcar-logo-superhero.jpg">
      </a>
    </div>

    <div class="sc-superhero__content">
      <h3 class="sc-superhero__title sc-margin-top-m">Title for Superhero</h3>
      <p class="sc-padding-bottom-xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing.
      </p>
    </div>
      
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 4 
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs"></div>

    <div class="sc-superhero__content sc-superhero__content--light">
      <span class="sc-disruptor sc-font-uppercase">Neu</span>
      <h2 class="sc-superhero__title sc-margin-top-m">Title for Superhero</h2>
      <p>
        That text needs to be explaned
        <as24-tooltip class="sc-tooltip">
          <as24-icon type="info" style="width: 16px;"></as24-icon>
          <span class="sc-tooltip-content">Information in tooltip <a href="/">link</a></span>
        </as24-tooltip>
      </p>
      <span class="sc-block sc-margin-top-xxl sc-font-s">* some footnotes</span>
    </div>
</div>

Show code sample

Teaser externalAPPROVED

service Agos

il prestito Findomestic

Findomestic è flessibile come le tue esigenze e con firma digitale.
Go to link

Category title Estimate your auto

Hello, I am an external service too!

                                
<div class="sc-teaser">

  <div class="sc-teaser__item">
      <input id="sc-teaser" type="checkbox" class="sc-teaser__toggle">
      <h3 class="sc-teaser__clickable">
        <label for="sc-teaser" class="sc-teaser__label">
          <span class="sc-teaser__category sc-font-s sc-font-bold sc-font-uppercase">service</span>
          <span class="sc-teaser__title sc-font-m sc-font-bold">Agos</span>
          <img class="sc-teaser__service-logo" src="/showcar-ui/docs/assets/images/showcar-agos.png">
        </label>
      </h3>
      <div class="sc-teaser__content">
          <img src="/showcar-ui/docs/assets/images/showcar-agos-tmp.png">
      </div>
  </div>
  <!-- -->
  <div class="sc-teaser__item">
      <input id="sc-teaser-2" type="checkbox" class="sc-teaser__toggle">
      <h3 class="sc-teaser__clickable">
        <label for="sc-teaser-2" class="sc-teaser__label">
          <span class="sc-teaser__category sc-font-s sc-font-bold sc-font-uppercase">il prestito</span>
          <span class="sc-teaser__title sc-font-m sc-font-bold">Findomestic</span>
        </label>
      </h3>
      <div class="sc-teaser__content">
          Findomestic è flessibile come le tue esigenze e con firma digitale.
          <br />
          <a href="#link-link">Go to link</a>
      </div>
  </div>
  <!-- -->
  <div class="sc-teaser__item">
      <input id="sc-teaser-3" type="checkbox" class="sc-teaser__toggle">
      <h3 class="sc-teaser__clickable">
        <label for="sc-teaser-3" class="sc-teaser__label">
          <span class="sc-teaser__category sc-font-s sc-font-bold sc-font-uppercase">Category title</span>
          <span class="sc-teaser__title sc-font-m sc-font-bold">Estimate your auto</span>
        </label>
      </h3>
      <div class="sc-teaser__content">
          Hello, I am an external service too!
      </div>
  </div>

</div>

Show code sample

utilities

Content containerNeeds review

The content container is a responsive element containing the entire content section. It takes care of the proper positioning of the content. NOTICE: Only use sc-content-container class on your page once!

viewport	container width	container alignment
< 1100px	100%
>= 1100px, <1440px	1100px	center
>= 1440px	1100px	center

...and one div to wrap them all

                                <div class="sc-content-container">...and one div to wrap them all</div>

Show code sample

GridApproved

ShowCar UI includes the responsive Susy grid system. It is implemented with a 12 column layout. There are predefined classes for grid rows and grid columns.
Every grid row should be placed within a .sc-content-container. Every grid row is represented as .sc-grid-row. Every grid cell is a .sc-grid-col-* container.

.sc-grid-col-12

.sc-grid-col-6

.sc-grid-col-4

.sc-grid-col-3

.sc-grid-col-2

.sc-grid-col-1

.sc-grid-col-8

.sc-grid-col-4

.sc-grid-col-3

.sc-grid-col-6

.sc-grid-col-3

                                <div class="sc-content-container">
	<div class="sc-grid-row">
		<div class="sc-grid-col-12">
			.sc-grid-col-12
		</div>
	</div>
	<div class="sc-grid-row">
		<div class="sc-grid-col-6">
			.sc-grid-col-6
		</div>
		<div class="sc-grid-col-6">
			.sc-grid-col-6
		</div>
	</div>
	<div class="sc-grid-row">
		<div class="sc-grid-col-4">
			.sc-grid-col-4
		</div>
		<div class="sc-grid-col-4">
			.sc-grid-col-4
		</div>
		<div class="sc-grid-col-4">
			.sc-grid-col-4
		</div>
	</div>
	<div class="sc-grid-row">
		<div class="sc-grid-col-3">
			.sc-grid-col-3
		</div>
		<div class="sc-grid-col-3">
			.sc-grid-col-3
		</div>
		<div class="sc-grid-col-3">
			.sc-grid-col-3
		</div>
		<div class="sc-grid-col-3">
			.sc-grid-col-3
		</div>
	</div>
	<div class="sc-grid-row">
		<div class="sc-grid-col-2">
			.sc-grid-col-2
		</div>
		<div class="sc-grid-col-2">
			.sc-grid-col-2
		</div>
		<div class="sc-grid-col-2">
			.sc-grid-col-2
		</div>
		<div class="sc-grid-col-2">
			.sc-grid-col-2
		</div>
		<div class="sc-grid-col-2">
			.sc-grid-col-2
		</div>
		<div class="sc-grid-col-2">
			.sc-grid-col-2
		</div>
	</div>
	<div class="sc-grid-row">
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
		<div class="sc-grid-col-1">
			.sc-grid-col-1
		</div>
	</div>
	<div class="sc-grid-row">
		<div class="sc-grid-col-8">
			.sc-grid-col-8
		</div>
		<div class="sc-grid-col-4">
			.sc-grid-col-4
		</div>
	</div>
	<div class="sc-grid-row">
		<div class="sc-grid-col-3">
			.sc-grid-col-3
		</div>
		<div class="sc-grid-col-6">
			.sc-grid-col-6
		</div>
		<div class="sc-grid-col-3">
			.sc-grid-col-3
		</div>
	</div>
</div>

Show code sample

Responsive gridApproved

In case you need some responsive grid functionality, you need to use the responsive grid classes additionally. The best practice is to use the general .sc-grid-col-* class first and override it, depending on your needs with the necessary viewport specific grid class .sc-grid-col-*-*. Always keep in mind, that smaller viewport grid classes override bigger ones.

Grid column classes	device min-width	device max-width
`.sc-grid-col-*` (default)
`.sc-grid-col-xl-*`	1100px	∞
`.sc-grid-col-l-*`		1099px
`.sc-grid-col-m-*`		1023px
`.sc-grid-col-s-*`		767px
`.sc-grid-col-xs-*`		320px

With the responsive grid column classes, you are able to set the column width in dependency to the viewport. For example, if you define a grid with the classes sc-grid-col-4 sc-grid-col-m-6 sc-grid-col-s-12 it will be 4 columns wide on devices larger than M-Viewport, 6 columns wide on devices with M-Viewport and 12 columns wide in devices with S-Viewport.
You can simply check the behavior of the grid by resizing the current page.

.sc-grid-col-3 .sc-grid-col-s-12 .sc-grid-col-m-12 .sc-grid-col-xs-3

.sc-grid-col-3 .sc-grid-col-s-6 .sc-grid-col-m-4 .sc-grid-col-xs-3

.sc-grid-col-3 .sc-grid-col-s-12 .sc-grid-col-m-4 .sc-grid-col-xs-3

                                <div class="sc-grid-row">
    <div class="sc-grid-col-3 sc-grid-col-s-12 sc-grid-col-m-12 sc-grid-col-xs-3">
        .sc-grid-col-3 .sc-grid-col-s-12 .sc-grid-col-m-12 .sc-grid-col-xs-3
    </div>
    <div class="sc-grid-col-3 sc-grid-col-s-6 sc-grid-col-m-4 sc-grid-col-xs-3">
        .sc-grid-col-3 .sc-grid-col-s-6 .sc-grid-col-m-4 .sc-grid-col-xs-3
    </div>
    <div class="sc-grid-col-3 sc-grid-col-s-6 sc-grid-col-m-4 sc-grid-col-xs-3">
        .sc-grid-col-3 .sc-grid-col-s-6 .sc-grid-col-m-4 .sc-grid-col-xs-3
    </div>
    <div class="sc-grid-col-3 sc-grid-col-s-12 sc-grid-col-m-4 sc-grid-col-xs-3">
        .sc-grid-col-3 .sc-grid-col-s-12 .sc-grid-col-m-4 .sc-grid-col-xs-3
    </div>
</div>

Show code sample

Responsive images - art directionApproved

Art direction - cropping the image differently in different device resolutions. It is used when providing a smaller version of the image won’t work because text or other small elements will be unreadable (e.g. hero image).
Use <picture> tag.
Also see demo here

                                <picture>
    <source srcset="https://placehold.it/468x150" media="(max-width: 468px)">
    <source srcset="https://placehold.it/780x150" media="(max-width: 780px)">
    <source srcset="https://placehold.it/1024x150" media="(max-width: 1024px)">
    <source srcset="https://placehold.it/1400x150">
    <img srcset="https://placehold.it/1400x150" alt="My default image">
</picture>

Show code sample

Responsive images - resolution switchingApproved

Use srcset attribute in the <img> tag when you need to select a different source of the same image because you need a different resolution.

The height and width of the image should remain fixed.

<img src="images/space-needle.jpg" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w">

Сustom height and width of the image based on the viewport.

<img src="images/space-needle.jpg" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w">

Also see demo page here

                                <img src="https://placehold.it/468x150" sizes="(max-width: 40em) 100vw, 50vw" srcset="https://placehold.it/468x150/FFE494 468w, https://placehold.it/780x150/e494ff 780w, https://placehold.it/1024x150/94FFE4 1024w">

Show code sample

Sticky elementsApproved

Sticky element represents any HTML element that keeps in view even if you scroll.
Please note, that the sticky element position is in the middle of viewport. It consists of three parts:

The sticky element itself, identified by a data-sticky attribute with a unique identifier for the element as a value.
Marker where it undocks (starts scrolling), identified by a data-sticky-undock attribute with the identifier as a value.
Marker where it docks (stops scrolling), identified by a data-sticky-dock attribute with the identifier as a value.

Both markers are optional. If you omit the undock marker, the start of the document is used. If you omit the dock marker the end of the document is used.

Sticky Spacer

                                <div data-sticky-undock="myBtn"></div>
<div class="spacer">
    Sticky Spacer
</div>
<div data-sticky-dock="myBtn"></div>
<div data-sticky="myBtn" class="sc-text-center">
    <button class="sc-btn-bob">Sticky Button</button>
</div>

Show code sample

Absolute centeringApproved

Look ma, I am totally centered

                                <div class="sc-absolute-center">
    <p>Look ma, I am totally centered</p>
</div>

Show code sample

Block centeringApproved

.sc-block-center

                                <div class="sc-block-center">.sc-block-center</div>

Show code sample

ClearfixApproved

Usage information:

To avoid braking divs in case that they have a float css style, you should wrap them in <div class="sc-clearfix"></div> so that they could be cleared.

Element 1

Element 2

                                <div class="sc-clearfix">
    
    <!-- floating elements example -->
    <div>Element 1</div>
    <div>Element 2</div>
    <!-- -->

</div>

Show code sample

EllipsisApproved

If the content gets too long, an ellipsis will be placed and the text is cut off. Add a title attribute to display the whole text on mouseover.

Fun with ellipsis

                                <div class="sc-ellipsis" title="Loooong title">Fun with ellipsis</div>

Show code sample

FloatsApproved

                                <div class="sc-clearfix">
    <div class="sc-pull-left"></div>
    <div class="sc-pull-left"></div>
    <div class="sc-pull-left"></div>
</div>
<hr>
<div class="sc-clearfix">
    <div class="sc-pull-right"></div>
    <div class="sc-pull-right"></div>
    <div class="sc-pull-right"></div>
</div>

Show code sample

Horizontal lineApproved

To separate some content you can use a horizontal line.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<hr>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Show code sample

Smooth scrollingApprovedJS

Adds animated scrolling when anchoring to elements. In order to use it add the data-smooth-scroll attribute to any anchor link. In case you want to trigger the smooth scrolling via JS have a look at the JS example below.

To Top

                                <a href="#utilities-link" data-smooth-scroll>To Top</a>

Show code sample

                                // In case you want to trigger the smooth scrolling via JS
import { smoothScroll } from '07-utilities/scroll.js';

const target = document.querySelector('#target');
const duration = 300 //default

// Default call
smoothScroll(target, duration);

// Or add a callback for additional handling (like in spy navigation)
smoothScroll(target, duration, () => {
    // Your OPTIONAL callback code here
});

Show js sample

Text alignmentsApproved

Text aligned left

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text aligned right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Centered text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Justified text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text without wrapping

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

                                <strong>Text aligned left</strong>
<p class="sc-text-left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<hr>
<strong>Text aligned right</strong>
<p class="sc-text-right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<hr>
<strong>Centered text</strong>
<p class="sc-text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<hr>
<strong>Justified text</strong>
<p class="sc-text-justify">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<hr>
<strong>Text without wrapping</strong>
<p class="sc-text-nowrap">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Show code sample

Visible/hidden classesApproved

Usage:

Utility classes to show/hide elements based on the current viewport (media queries).
IMPORTANT: Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

THE OLD CLASSES (e.g. sc-visible-s) STILL WORK AS THEY USED TO.

Hidden attribute:

The hidden attribute may be applied to any element, and effectively hides elements similar to display: none in CSS.
It is supported by all major browsers.

	S Viewport	M Viewport	L Viewport	XL Viewport
`.sc-visible-at-xl`				Visible
`.sc-visible-at-l`			Visible
`.sc-visible-at-m`		Visible
`.sc-visible-at-s`	Visible
`.sc-hidden`	Hidden	Hidden	Hidden	Hidden
`.sc-hidden-at-xl`				Hidden
`.sc-hidden-at-l`			Hidden
`.sc-hidden-at-m`		Hidden
`.sc-hidden-at-s`	Hidden

I am hidden on all viewports

I am hidden on S (321 - 767)

I am hidden on M (768 - 1023)

I am hidden on L (1024 - 1099)

I am hidden on XL (1100 - ∞ )

I am visible on S (321 - 767)

I am visible on M (768 - 1023)

I am visible on L (1024 - 1099)

I am visible on XL (1100 - ∞ )

                                <p class="sc-hidden">I am hidden on all viewports</p>
<p class="sc-hidden-at-s">I am hidden on S (321 - 767)</p>
<p class="sc-hidden-at-m">I am hidden on M (768 - 1023)</p>
<p class="sc-hidden-at-l">I am hidden on L (1024 - 1099)</p>
<p class="sc-hidden-at-xl">I am hidden on XL (1100 - ∞ )</p>
<p class="sc-visible-at-s">I am visible on S (321 - 767)</p>
<p class="sc-visible-at-m">I am visible on M (768 - 1023)</p>
<p class="sc-visible-at-l">I am visible on L (1024 - 1099)</p>
<p class="sc-visible-at-xl">I am visible on XL (1100 - ∞ )</p>

Show code sample

extra packages

Icons

<as24-icon type="star"></as24-icon>

You can use all the icons defined by showcar-icons with the custom tag. Please use it with standart sizes. Only "most-used" icons are deliver with showca-icons.

For further information see the documentation under https://github.com/AutoScout24/showcar-icons

Icons related to 360 player could be found here

Icons with priceestimation could be found here. Technically it's not an icon but styled html elements

The following icon names are currently available:

Carousel

Showcar-carousel is a component for cycling through elements (images, videos).
This is how carousel looks in general

Example: https://autoscout24.github.io/showcar-carousel

For how-to-use see read.me https://github.com/AutoScout24/showcar-carousel

Pictures

This module provides an easy to use vanilla js gallery library with previews and full screen view.

Actually it is just a wrapper that handles the communication between two https://github.com/AutoScout24/showcar-carousel components.

Examples: https://autoscout24.github.io/showcar-pictures

For further information see the documentation under https://github.com/AutoScout24/showcar-pictures

Tracking

Tracking library for ShowCar-based pages.

For further information see the documentation under https://github.com/AutoScout24/showcar-tracking

Ads

This library provides a unified solution for integrating advertisements (ads) on all AS24 Tatsu web pages.

For further information see the documentation under https://github.com/AutoScout24/OSA-One-Scout-Adlib

ShowCar UI

getting started

About

Github repository:

Getting started

Globals:

Atoms:

Molecules:

Organisms:

Utilities:

Extra packages:

Usage

Include jigsaw fragment (prefered):

Include pre-built dist files:

Build locally:

FAQ

Contribution

globals

Variables

GreyscaleApproved

Primary/SecondaryApproved

Success/Warning/Error/InfoApproved

SpacingsApproved

ViewportsApproved

Fonts and headlinesApproved

Font sizes

Headlines

HEADLINE2 Lorem ipsum dolor sit amet

Font variationsApproved

atoms

ButtonApproved

When to use a link or button

Usage information

Button disabledApproved

Button fullwidthApproved

Link as a buttonApproved

Collapse more&lessApprovedJS

Collapse toggleApprovedJS

Color selector checkboxApproved

additional scss

Color selector radioApproved

Custom dropdown that close when item is selectedNeeds refactoringJS

Custom dropdown defaultNeeds refactoringJS

Custom dropdown without scrollbar

Custom dropdown with scrollbar

Custom dropdown disabledNeeds refactoringJS

Custom dropdown with icons (multiple choice possible)Needs refactoringJS

Custom dropdown with icons (one choice possible)Needs refactoringJS

Disruptor SmallAPPROVED

DisruptorAPPROVED

Google MapApproved

HighlightApproved

IconApproved

Inlined infoApproved

CheckboxApproved

Input defaultApproved

Input disabledApproved

Input errorApproved

Input infoApproved

Input successApproved

Radio buttonApproved

Dropdown defaultApproved

Dropdown disabledApproved

TextareaApproved

ToggleApproved

Labels with different inputs Deprecated

Lazy loading imagesApprovedJS

As <img>

As <picture>

As background-image (NOT recommended, please consider two first options as a better choice)

Shimmer for lazy loading elementsApproved

LightboxNeeds refactoringJS

The modal window title

Button linkApproved

Link defaultApproved

Link inlineApproved

List decimalApproved

ListApproved

PopoverNeeds Review

Popover (arrow in the middle)

As `<img>`

As `<picture>`

As `background-image` (NOT recommended, please consider two first options as a better choice)

Example with`sc-grid-col-*`