Shadows

The Core styles contain a shadow that can be applied to all block elements. It is a subtle drop shadow that was defined as the global standard shadow for content boxes on ImmobilienScout24 pages.

Usage

You can apply a shadow to your content boxes by adding the shadow class. If you want to reset an existing box-shadow you can use the shadow-none class.

Box with shadow

                    <div class="border border-lightblue padding shadow">
                        Box with drop shadow
                    </div>

Box with drop shadow

Shadow reset

                    <form class="form form-theme-blue">
                        <fieldset>
                            <h3>Headline</h3>
                        </fieldset>
                        <fieldset>
                            <p>fieldset with default style</p>
                        </fieldset>
                        <fieldset class="border-none shadow-none">
                            <p>fieldset with style reset</p>
                        </fieldset>
                    </form>