{{--

Call to action block:
Black block with very large streamer and a call to action.
Use a contained layout to keep this focused in the center area.
Inside use a flexable layout so we can easily vertically align content.

--}}

{{-- Keep the content focused in the center area--}}
<section class="contained-layout" id="call-to-action-block">

    {{-- The black block itself, nicely centered in your viewport --}}
    <div class="call-to-action-block col-10 centered col-md-12">

        {{-- Create a flexable layout for better alignment opportunities --}}
        <div class="flexable-layout">

            {{-- Large heavy text--}}
            <div class="flex-col">
                <h2>{!! $streamer !!}</h2>
            </div>

            {{-- Call to action --}}
            <div class="flex-col">
                {!! $callToAction !!}

                {{-- Check for a comment --}}
                @if(isset($comment))
                    <span class="comment">{!! $comment !!}</span>
                @endif

                {{-- Button --}}
                @if(isset($buttonLabel))
                <div class="button-holder">
                    <a class="button stroked white {{ $buttonIcon or 'arrow' }}" href="{{$buttonHref}}" target="{{ $target or '_self' }}">
                        {{$buttonLabel}}
                    </a>
                </div>
                @endif
            </div>

        </div>

    </div>

</section>