Inline Css Wrapper

A wrapper that only applies while there is inline css attached.

With styling parameter.

Without styling parameter.

<!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-margin__bottom--2 c-typography__variant--h2" data-uid="682b4d7911059">
    With styling parameter.
</h2>    <!-- inlineCssWrapper.blade.php -->
    <div class="c-inlinecsswrapper" style="padding: 8px; background-color: blue; border-radius: 100%; display: inline-flex;" data-uid="682b4d7911250">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--restaurant c-icon--material c-icon--material-restaurant material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-primary c-icon--size-xl" material-symbol="restaurant" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b4d791116e">
                    </span>
    </div>

    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography u-margin__bottom--2 c-typography__variant--h2" data-uid="682b4d79112e2">
    Without styling parameter.
</h2>    <!-- inlineCssWrapper.blade.php -->
    <!-- icon.blade.php -->
    <span class="c-icon c-icon--restaurant c-icon--material c-icon--material-restaurant material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-primary c-icon--size-xl" material-symbol="restaurant" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="682b4d791132c">
                    </span>

@typography([
    'element' => 'h2',
    'classList' => ['u-margin__bottom--2']
])
With styling parameter.
@endtypography
@inlineCssWrapper([
    'styles' => [
        'padding' => '8px',
        'background-color' => 'blue',
        'border-radius' => '100%',
        'display' => 'inline-flex'
    ]
])
@icon([
    'icon' => 'restaurant',
    'size' => 'xl',
    'color' => 'primary',
])
@endicon
@endinlineCssWrapper

@typography([
    'element' => 'h2',
    'classList' => ['u-margin__bottom--2']
])
Without styling parameter.
@endtypography
@inlineCssWrapper([
])
@icon([
    'icon' => 'restaurant',
    'size' => 'xl',
    'color' => 'primary',
])
@endicon
@endinlineCssWrapper

Blade component parameters

Key	Default value	Type	Available values	Description
componentElement	div	string	-	-
styles	[]	array	-	-
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/InlineCssWrapper/inlineCssWrapper.json