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="6916272c43efd">
<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="6916272c43f85">
<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="6916272c44004">
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="6916272c4431f">
<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="6916272c4435b">
<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="6916272c4439a">
Innovation
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="6916272c443cf">
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="6916272c4470c">
<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="6916272c44a43">
<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="6916272c44a87">
Innovation
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-brand__line c-brand__line--2 c-typography__variant--brand" data-uid="6916272c44ac6">
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. |