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="662b793885fcd">
    <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="662b793886049">
            <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="662b7938860b1">
    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="662b793886124">
    <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="662b79388614e">
            <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="662b793886180">
    Innovation
</span>                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="662b7938861ae">
    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="662b793886231">
            <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)

Warning: The parameter "logotype" in the brand component should be of type "array" but was recieved as type "boolean". in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 228

<div style="max-width: 500px">
        <br />
<b>Warning</b>:  The parameter <b>"logotype"</b> in the <b>brand</b> component should be of type <b>"array"</b> but was recieved as type <b>"boolean"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<!-- brand.blade.php -->
<div class="c-brand" data-uid="662b7938862d4">
    <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="662b793886313">
    Innovation
</span>                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="662b79388633c">
    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