Scope

The Scope component groups inner content styles and limits the scope of styles to prevent them from affecting other parts of the interface.

Scoped Buttons

This scope element limits the styles of the components within it. This example shows how the styles of the buttons are limited to only the buttons within its scope.

Scope 1 - Button 1 Scope 1 - Button 2 Scope 2 - Button 1 Scope 2 - Button 2 Unscoped - Button 1 Unscoped - Button 2

<a class="c-button c-button__filled c-button__filled--primary c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Scope 1 - Button 1" data-uid="69f0d0ad8b702" data-component="button" data-scope="s-a-unique-scope-id;">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Scope 1 - Button 1
            </span>
        
    </span> </a>
        <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Scope 1 - Button 2" data-uid="69f0d0ad8b764" data-component="button" data-scope="s-a-unique-scope-id;">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Scope 1 - Button 2
            </span>
        
    </span> </a>

    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Scope 2 - Button 1" data-uid="69f0d0ad8c119" data-component="button" data-scope="s-a-unique-scope-id-2;">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Scope 2 - Button 1
            </span>
        
    </span> </a>
        <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Scope 2 - Button 2" data-uid="69f0d0ad8c16c" data-component="button" data-scope="s-a-unique-scope-id-2;">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Scope 2 - Button 2
            </span>
        
    </span> </a>


    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Unscoped - Button 1" data-uid="69f0d0ad8c205" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Unscoped - Button 1
            </span>
        
    </span> </a>
    <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Unscoped - Button 2" data-uid="69f0d0ad8c244" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Unscoped - Button 2
            </span>
        
    </span> </a>

@scope(['name' => 'a-unique-scope-id'])
    @button([
        'text' => 'Scope 1 - Button 1',
        'color' => 'primary',
        'style' => 'filled',
        'href' => 'https://getmunicipio.com'

    ])
    @endbutton

    @button([
        'text' => 'Scope 1 - Button 2',
        'color' => 'primary',
        'style' => 'filled',
        'href' => 'https://getmunicipio.com'

    ])
    @endbutton
@endscope

@scope(['name' => 'a-unique-scope-id-2'])
    @button([
        'text' => 'Scope 2 - Button 1',
        'color' => 'primary',
        'style' => 'filled',
        'href' => 'https://getmunicipio.com'

    ])
    @endbutton

    @button([
        'text' => 'Scope 2 - Button 2',
        'color' => 'primary',
        'style' => 'filled',
        'href' => 'https://getmunicipio.com'

    ])
    @endbutton
@endscope


@button([
    'text' => 'Unscoped - Button 1',
    'color' => 'primary',
    'style' => 'filled',
    'href' => 'https://getmunicipio.com'

])
@endbutton

@button([
    'text' => 'Unscoped - Button 2',
    'color' => 'primary',
    'style' => 'filled',
    'href' => 'https://getmunicipio.com'

])
@endbutton

Scope List

A list of scopes can also be provided to present multiple scopes within the same element.

Scope 1 + Scope 2 - Button

<a class="c-button c-button__filled c-button__filled--primary c-button--md" href="https://getmunicipio.com" target="_top" aria-label="Scope 1 + Scope 2 - Button" data-uid="69f0d0ad8c5f4" data-component="button" data-scope="s-scope-1; s-scope-2;">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text ">
                Scope 1 + Scope 2 - Button
            </span>
        
    </span> </a>

@scope(['name' => ['scope-1', 'scope-2']])
    @button([
        'text' => 'Scope 1 + Scope 2 - Button',
        'color' => 'primary',
        'style' => 'filled',
        'href' => 'https://getmunicipio.com'

    ])
    @endbutton
@endscope

API

Parameter	Default	Description
name		The name of the scope.

Similar components

Container Section