@props([
'title' => 'User Guide',
'id' => 'guideModal'
])

<button class="btn btn-light ml-2"
    data-toggle="modal"
    data-target="#{{ $id }}">

    <i class="fa fa-info-circle text-primary"></i>
</button>

<div class="modal fade" id="{{ $id }}">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fa fa-book"></i> {{ $title }}
                </h5>

                <button class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>

            <div class="modal-body">
                {{ $slot }}
            </div>

        </div>
    </div>
</div>