Brand

Displays a logotype according to the logotype component. Adds the ability to show text besides the logotype.

Single line

<div style="max-width: 500px">
        <!-- brand.blade.php -->
<div class="c-brand" data-uid="673ed1e444a6c">
    <svg viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet" class="c-brand__viewbox">
        <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
            <div class="c-brand__container" xmlns="http://www.w3.org/1999/xhtml">

                                        <!-- logotype.blade.php -->
<figure class="c-logotype c-brand__logotype ripple ripple--before" data-uid="673ed1e444acb">
            <img src="/assets/img/brand-red.svg" alt="This is a logotype" class="c-logotype__image" />
            </figure>
                
                <div class="c-brand__text">
                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--1 c-typography__variant--brand" data-uid="673ed1e444b26">
    Innovation Helsingborg
</span>                                    </div>
            </div>
        </foreignObject>
    </svg>
</div>
</div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

<div style="max-width: 500px">
    @brand([
        'logotype' => [
            'src'=> "/assets/img/brand-red.svg",
            'alt' => "This is a logotype"
        ],
        'text' => [
            "Innovation Helsingborg"
        ]
    ])
    @endbrand
</div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

Two rows

<div style="max-width: 500px">
        <!-- brand.blade.php -->
<div class="c-brand" data-uid="673ed1e444de9">
    <svg viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet" class="c-brand__viewbox">
        <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
            <div class="c-brand__container" xmlns="http://www.w3.org/1999/xhtml">

                                        <!-- logotype.blade.php -->
<figure class="c-logotype c-brand__logotype ripple ripple--before" data-uid="673ed1e444e13">
            <img src="/assets/img/brand-red.svg" alt="This is a logotype" class="c-logotype__image" />
            </figure>
                
                <div class="c-brand__text">
                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--1 c-typography__variant--brand" data-uid="673ed1e444e44">
    Innovation
</span>                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="673ed1e444e6f">
    Helsingborg
</span>                                    </div>
            </div>
        </foreignObject>
    </svg>
</div>
</div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

<div style="max-width: 500px">
    @brand([
        'logotype' => [
            'src'=> "/assets/img/brand-red.svg",
            'alt' => "This is a logotype"
        ],
        'text' => [
            "Innovation",
            "Helsingborg",
        ],
    ])
    @endbrand
</div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

Only logotype (no text)

<div style="max-width: 500px">
        <!-- brand.blade.php -->
 
                <!-- logotype.blade.php -->
<figure class="c-logotype c-brand__logotype ripple ripple--before" data-uid="673ed1e445100">
            <img src="/assets/img/brand-red.svg" alt="This is a logotype" class="c-logotype__image" />
            </figure>
    </div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

<div style="max-width: 500px">
    @brand([
        'logotype' => [
            'src'=> "/assets/img/brand-red.svg",
            'alt' => "This is a logotype"
        ]
    ])
    @endbrand
</div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

Only text (no logo)

<div style="max-width: 500px">
        <!-- brand.blade.php -->
<div class="c-brand" data-uid="673ed1e445151">
    <svg viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet" class="c-brand__viewbox">
        <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
            <div class="c-brand__container" xmlns="http://www.w3.org/1999/xhtml">

                
                <div class="c-brand__text">
                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--1 c-typography__variant--brand" data-uid="673ed1e44517a">
    Innovation
</span>                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="673ed1e4451a2">
    Helsingborg
</span>                                    </div>
            </div>
        </foreignObject>
    </svg>
</div>
</div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

<div style="max-width: 500px">
    @brand([
        'logotype' => false,
        'text' => [
            "Innovation",
            "Helsingborg",
        ]
    ])
    @endbrand
</div>

<style>
    :root {
        --c-brand-height: 100px;
    }
</style>

Blade component parameters

Key	Default value	Type	Available values	Description
logotype	[]	array	-	Array containing specified logotype component attributes
text	[]	array	-	Array of brand name, each item will be separated on multiple lines
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Brand/brand.json