Brand

The Brand component provides a reusable pattern for brand in the interface.

Single line

<div style="max-width: 500px">
        <!-- brand.blade.php -->
<div class="c-brand" data-uid="69f0d15b85e9e" data-component="brand">
    <svg viewBox="0 0 500 100" preserveAspectRatio="xMinYMid meet" class="c-brand__viewbox">
        <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <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="69f0d15b85f21" data-component="logotype">
            <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="69f0d15b85f9f" data-component="typography">
    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="69f0d15b862c7" data-component="brand">
    <svg viewBox="0 0 500 100" preserveAspectRatio="xMinYMid meet" class="c-brand__viewbox">
        <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <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="69f0d15b86309" data-component="logotype">
            <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="69f0d15b8634d" data-component="typography">
    Innovation
</span>                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="69f0d15b86388" data-component="typography">
    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)

A logotype component will be shown.

<div style="max-width: 500px">
        <!-- brand.blade.php -->
 
                <!-- logotype.blade.php -->
<figure class="c-logotype c-brand__logotype ripple ripple--before" data-uid="69f0d15b86736" data-component="logotype">
            <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)

Logotype will be removed

<div style="max-width: 500px">
        <!-- brand.blade.php -->
<div class="c-brand" data-uid="69f0d15b869f5" data-component="brand">
    <svg viewBox="0 0 500 100" preserveAspectRatio="xMinYMid meet" class="c-brand__viewbox">
        <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <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="69f0d15b86a4d" data-component="typography">
    Innovation
</span>                                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="69f0d15b86a8d" data-component="typography">
    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>

API

Parameter	Default	Description
logotype	[]	Array containing specified logotype component attributes
text	[]	Array of brand name, each item will be separated on multiple lines

CSS API

Variable	Default	Type	Values	Description
--c-brand--space	var(--space)	range	-	Adjusts the spacing between logo and text.
--c-brand--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-brand--color--primary	var(--color--primary)	color	-	Overrides the default text color for the brand component.
--c-brand--font-family-heading	var(--font-family-heading)	font	-	Overrides the default font family for the brand component.
--c-brand--font-size-400	var(--font-size-400)	range	-	Three steps above base in the type scale. Equivalent to h4.
--c-brand--font-size-multiplier	1	range	-	Scales the brand text size locally without changing the global typography scale.

Similar components

Breadcrumb Card Date Badge