Skip to content

Widget Components

Diego Smania edited this page Jul 6, 2024 · 11 revisions

These components are classified under the Widget category and represents some of the available AdminLTE widgets. At next you can see the list of available components:

Components
Alert, Callout, Card, Info Box, ProfileColItem, ProfileRowItem, ProfileWidget, Progress, Small Box

Alert

This component represents an AdminLTE styled alert notification. The following attributes are available:

Attribute Description Type Default Required
icon A fontawesome icon for the alert string null no
dismissable Setup the alert as dismissable, a button will be available to dismiss the alert any null no
theme An AdminLTE theme: dark, light, primary, secondary, info, success, warning or danger string null no
title The title for the alert string null no

Any other attribute you define will be directly inserted into the underlying div.alert element. So, for example, you can define a class, onclick, id or any other attribute you may need.

Examples

{{-- Minimal --}}
<x-adminlte-alert>Minimal example</x-adminlte-alert>

{{-- Minimal with title and dismissable --}}
<x-adminlte-alert title="Well done!" dismissable>
    Minimal example
</x-adminlte-alert>

{{-- Minimal with icon only --}}
<x-adminlte-alert icon="fas fa-user">
    User has logged in!
</x-adminlte-alert>

{{-- Themes --}}
<x-adminlte-alert theme="light" title="Tip">
    Light theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="dark" title="Important">
    Dark theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="primary" title="Primary Notification">
    Primary theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="secondary" icon="" title="Secondary Notification">
    Secondary theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="info" title="Info">
    Info theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="success" title="Success">
    Success theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="warning" title="Warning">
    Warning theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="danger" title="Danger">
    Danger theme alert!
</x-adminlte-alert>

{{-- Custom --}}
<x-adminlte-alert class="bg-teal text-uppercase" icon="fa fa-lg fa-thumbs-up" title="Done" dismissable>
    Your payment was complete!
</x-adminlte-alert>

Use the next image as reference to check how every example is rendered. Please, note in the image the alerts were wrapped inside a Bootstrap Grid System to organize them.

Alert Component

Callout

This component represents an AdminLTE styled callout notification. The following attributes are available:

Attribute Description Type Default Required
icon A fontawesome icon for the callout string null no
theme An AdminLTE theme: info, success, warning or danger string null no
title The title for the callout string null no
title-class Extra classes for the title container (to customize the title) string null no

Any other attribute you define will be directly inserted into the underlying div.callout element. So, for example, you can define a class, onclick, id or any other attribute you may need.

Examples

{{-- Minimal --}}
<x-adminlte-callout>Minimal example</x-adminlte-callout>

{{-- themes --}}
<x-adminlte-callout theme="info" title="Information">
    Info theme callout!
</x-adminlte-callout>
<x-adminlte-callout theme="success" title="Success">
    Success theme callout!
</x-adminlte-callout>
<x-adminlte-callout theme="warning" title="Warning">
    Warning theme callout!
</x-adminlte-callout>
<x-adminlte-callout theme="danger" title="Danger">
    Danger theme callout!
</x-adminlte-callout>

{{-- Custom --}}
<x-adminlte-callout theme="success" class="bg-teal" icon="fas fa-lg fa-thumbs-up" title="Done">
    <i class="text-dark">Your payment was complete!</i>
</x-adminlte-callout>
<x-adminlte-callout theme="danger" title-class="text-danger text-uppercase"
    icon="fas fa-lg fa-exclamation-circle" title="Payment Error">
    <i>There was an error on the payment procedure!</i>
</x-adminlte-callout>
<x-adminlte-callout theme="info" class="bg-gradient-info" title-class="text-bold text-dark"
    icon="fas fa-lg fa-bell text-dark" title="Notification">
    This is a notification.
</x-adminlte-callout>
<x-adminlte-callout theme="danger" class="bg-gradient-pink" title-class="text-uppercase"
    icon="fas fa-lg fa-leaf text-purple" title="observation">
    <i>A styled observation for the user.</i>
</x-adminlte-callout>

Use the next image as reference to check how every example is rendered. Please, note in the image the callouts were wrapped inside a Bootstrap Grid System to organize them.

Callout Component

Card

This component represents an AdminLTE card box. The following attributes are available:

Attribute Description Type Default Required
body-class Additional classes for the card-body container (only from v3.6.2) string null no
collapsible Enables a collapsible card with a button to collapse/expand it. Use the 'collapsed' string value to initiate the card on collapsed mode any null no
disabled Disables the card (an overlay will show over the card) any null no
footer-class Additional classes for the card-footer container (only from v3.8.1) string null no
header-class Additional classes for the card-header container (only from v3.8.1) string null no
icon A fontawesome icon for the card header string null no
maximizable Enables a maximizable card with a button to maximize it any null no
removable Enables a removable card with a button to remove it any null no
theme The card theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lighblue or teal string null no
theme-mode The theme mode (full or outline) string null no
title The title for the card header string null no

Any other attribute you define will be directly inserted into the underlying div.card element. So, for example, you can define extra classes on the card by using class, or use onclick, id or any other attribute you may need.

Slots

  • toolsSlot: Use this slot to add extra elements on the card header (only from v3.8.1).
  • footerSlot: Use this slot to fill the card footer (only from v3.8.1).

Examples

{{-- Minimal with a title / no body --}}
<x-adminlte-card title="A card without body"/>

{{-- Minimal without header / body only --}}
<x-adminlte-card theme="lime" theme-mode="outline">
    A card without header...
</x-adminlte-card>

{{-- Disabled --}}
<x-adminlte-card title="Disabled Card" theme="teal" disabled>
    A disabled card with teal theme...
</x-adminlte-card>

{{-- Themes --}}
<x-adminlte-card title="Dark Card" theme="dark" icon="fas fa-lg fa-moon">
    A dark theme card...
</x-adminlte-card>
<x-adminlte-card title="Lightblue Card" theme="lightblue" theme-mode="outline"
    icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info"
    removable>
    A removable card with outline lightblue theme...
</x-adminlte-card>
<x-adminlte-card title="Purple Card" theme="purple" icon="fas fa-lg fa-fan" removable collapsible>
    A removable and collapsible card with purple theme...
</x-adminlte-card>
<x-adminlte-card title="Success Card" theme="success" theme-mode="full" icon="fas fa-lg fa-thumbs-up"
    collapsible="collapsed">
    A collapsible card with full success theme and collapsed...
</x-adminlte-card>
<x-adminlte-card title="Info Card" theme="info" icon="fas fa-lg fa-bell" collapsible removable maximizable>
    An info theme card with all the tool buttons...
</x-adminlte-card>

{{-- Complex / Extra tool / Footer --}}
<x-adminlte-card title="Form Card" theme="maroon" theme-mode="outline"
    class="elevation-3" body-class="bg-maroon" header-class="bg-light"
    footer-class="bg-maroon border-top rounded border-light"
    icon="fas fa-lg fa-bell" collapsible removable maximizable>
    <x-slot name="toolsSlot">
        <select class="custom-select w-auto form-control-border bg-light">
            <option>Skin 1</option>
            <option>Skin 2</option>
            <option>Skin 3</option>
        </select>
    </x-slot>
    <x-adminlte-input name="User" placeholder="Username"/>
    <x-adminlte-input name="Pass" type="password" placeholder="Password"/>
    <x-slot name="footerSlot">
        <x-adminlte-button class="d-flex ml-auto" theme="light" label="submit"
            icon="fas fa-sign-in"/>
    </x-slot>
</x-adminlte-card>

Use the next image as reference to check how every example is rendered. Please, note in the image the cards were wrapped inside a Bootstrap Grid System to organize them.

Card Component

Info Box

This component represents an AdminLTE info box widget. The following attributes are available:

Attribute Description Type Default Required
icon A Font Awesome icon for the info box string null no
icon-theme The icon wrapper theme (same values as theme property) string null no
description A long text/description for the info box string null no
progress Enables a progress bar for the box. The value should be an integer with the percentage of the progress bar int null no
progress-theme The progress bar theme (same values as theme property) string null no
text A short text/description for the info box string null no
theme The small box theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lightblue or teal string null no
title A title/header for the info box string null no
url An url for the info box. By default, will be placed on the title (only from v3.9.1) string null no
url-target The target element where to place the url: title (default) or text (only from v3.9.1) string null no

Any other attribute you define will be directly inserted into the underlying div.info-box element. So, for example, you can define extra classes using the class attribute, use the onclick, the id or any other attribute you may need.

Javascript Utility Class

This component also provides a Javascript utility class called _AdminLTE_InfoBox. You can use this class to interact or update an already rendered info box element. To use the class, first you need to assign an id attribute to your info box element, then you create an object using the id attribute previously assigned in the class constructor, for example:

{{-- On the blade file... --}}
<x-adminlte-info-box id="myInfoBox" title="Title" .../>
// On your Javascript code...
let myInfoBox = new _AdminLTE_InfoBox("myInfoBox");

Then you can use the next methods from the instantiated object:

  • myInfoBox.update(data): To update the data of the info box element. The data should be an object with the new attributes, the supported object keys are: title, text, description, icon and progress (see examples for more details). The url attribute may be also updated from version v3.9.1.

Examples

{{-- Minimal with title, text and icon --}}
<x-adminlte-info-box title="Title" text="some text" icon="far fa-lg fa-star"/>

{{-- Themes --}}
<x-adminlte-info-box title="Views" text="424" icon="fas fa-lg fa-eye text-dark" theme="gradient-teal"/>

<x-adminlte-info-box title="Downloads" text="1205" icon="fas fa-lg fa-download" icon-theme="purple"/>

<x-adminlte-info-box title="528" text="User Registrations" icon="fas fa-lg fa-user-plus text-primary"
    theme="gradient-primary" icon-theme="white"/>

<x-adminlte-info-box title="Tasks" text="75/100" icon="fas fa-lg fa-tasks text-orange" theme="warning"
    icon-theme="dark" progress=75 progress-theme="dark"
    description="75% of the tasks have been completed"/>

{{-- Updatable --}}
<x-adminlte-info-box title="Reputation" text="0/1000" icon="fas fa-lg fa-medal text-dark"
    theme="danger" id="ibUpdatable" progress=0 progress-theme="teal"
    description="0% reputation completed to reach next level"/>

@push('js')
<script>

    $(document).ready(function() {

        let iBox = new _AdminLTE_InfoBox('ibUpdatable');

        let updateIBox = () =>
        {
            // Update data.
            let rep = Math.floor(1000 * Math.random());
            let idx = rep < 100 ? 0 : (rep > 500 ? 2 : 1);
            let progress = Math.round(rep * 100 / 1000);
            let text = rep + '/1000';
            let icon = 'fas fa-lg fa-medal ' + ['text-primary', 'text-light', 'text-warning'][idx];
            let description = progress + '% reputation completed to reach next level';

            let data = {text, icon, description, progress};
            iBox.update(data);
        };

        setInterval(updateIBox, 5000);
    })

</script>
@endpush

Use the next image as reference to check how every example is rendered. Please, note in the image the elements were wrapped inside a Bootstrap Grid System to organize them.

Info Box Component

Profile col Item, Profile Row Item

Both of these components represents an item for the AdminLTE profile widget. The main difference is that on the profile-col-item the elements are stacked vertically, while on the profile-row-item the element are stacked horizontally. The following attributes are available:

Attribute Description Type Default Required
badge A badge theme for the text attribute. When used, the text attribute will be wrapped inside a badge of the configured theme. string null no
icon A fontawesome icon for the item string null no
text The text/description for the item string null no
title The title/header for the item string null no
size The item size. Used to wrap the item inside a col-size div integer null no
url An url for the item. By default, it'll be placed on the title attribute string null no
url-target The target element where to place the url: title (default) or text (only from v3.12.0) string 'title' no

The available themes for the badge are: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lightblue or teal.

Tip

From version v3.12.0 you may prepend the pill- token to a theme (for example, pill-primary) to get a pill badge instead of a normal badge.

Any other attribute you define will be directly inserted into the underlying div.col-<size> element. So, for example, you can define class, onclick, id or any other attribute you may need. To see usage examples, check the Profile Widget Component.

Profile Widget

This component represents an AdminLTE profile widget. The following attributes are available:

Attribute Description Type Default Required
cover A cover image url for the profile header section (overlays the theme) string null no
desc A description for the user profile string null no
footer-class Extra classes for the profile footer (to customize the footer section) string null no
icon To setup the default icon that will be used when no image is provided (only from v3.12.0) string 'fas fa-user' no
img An image url for the user profile string null no
header-class Extra classes for the profile header (to customize the header section) string null no
layout-type The profile header layout type (modern or classic). string 'modern' no
name The user name of the profile string null no
theme The profile header theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lightblue or teal string null no

Any other attribute you define will be directly inserted into the underlying div.card.card-widget element. So, for example, you can define class, onclick, id or any other attribute you may need. There is a main slot available to provide content into the footer section, usually by adding Profile Col Item or Profile Row Item elements, but you can try with custom content also.

Examples

Some examples with modern (default) layout:

{{-- Minimal with a name --}}
<x-adminlte-profile-widget name="User Name"/>

{{-- Themes --}}
<x-adminlte-profile-widget name="John Doe" desc="Administrator" theme="teal"
    img="https://picsum.photos/id/1/100">
    <x-adminlte-profile-col-item title="Followers" text="125" url="#"/>
    <x-adminlte-profile-col-item title="Following" text="243" url="#"/>
    <x-adminlte-profile-col-item title="Posts" text="37" url="#"/>
</x-adminlte-profile-widget>

<x-adminlte-profile-widget name="Sarah O'Donell" desc="Commercial Manager" theme="primary"
    img="https://picsum.photos/id/1011/100">
    <x-adminlte-profile-col-item class="text-primary border-right" icon="fas fa-lg fa-gift"
        title="Sales" text="25" size=6 badge="primary"/>
    <x-adminlte-profile-col-item class="text-danger" icon="fas fa-lg fa-users" title="Dependents"
        text="10" size=6 badge="danger"/>
</x-adminlte-profile-widget>

<x-adminlte-profile-widget name="Robert Gleeis" desc="Sound Manager" theme="warning"
    img="https://picsum.photos/id/304/100" header-class="text-left" footer-class="bg-gradient-dark">
    <x-adminlte-profile-col-item title="I'm also" text="Artist" size=3
        class="text-orange border-right border-warning"/>
    <x-adminlte-profile-col-item title="Loves" text="Music" size=6
        class="text-orange border-right border-warning"/>
    <x-adminlte-profile-col-item title="Like to" text="Travel" size=3
        class="text-orange"/>
</x-adminlte-profile-widget>

<x-adminlte-profile-widget name="Alice Viorich" desc="Community Manager" theme="purple"
    img="https://picsum.photos/id/454/100" footer-class="bg-gradient-pink">
    <x-adminlte-profile-col-item icon="fab fa-2x fa-instagram" text="Instagram" badge="purple" size=4/>
    <x-adminlte-profile-col-item icon="fab fa-2x fa-facebook" text="Facebook" badge="purple" size=4/>
    <x-adminlte-profile-col-item icon="fab fa-2x fa-twitter" text="Twitter" badge="purple" size=4/>
</x-adminlte-profile-widget>

{{-- Custom --}}
<x-adminlte-profile-widget class="elevation-4" name="Willian Dubling" desc="Web Developer"
    img="https://picsum.photos/id/177/100" cover="https://picsum.photos/id/541/550/200"
    header-class="text-white text-right" footer-class='bg-gradient-dark'>
    <x-adminlte-profile-row-item title="4+ years of experience with"
        class="text-center border-bottom border-secondary"/>
    <x-adminlte-profile-col-item title="Javascript" icon="fab fa-2x fa-js text-orange" size=3/>
    <x-adminlte-profile-col-item title="PHP" icon="fab fa-2x fa-php text-orange" size=3/>
    <x-adminlte-profile-col-item title="HTML5" icon="fab fa-2x fa-html5 text-orange" size=3/>
    <x-adminlte-profile-col-item title="CSS3" icon="fab fa-2x fa-css3 text-orange" size=3/>
    <x-adminlte-profile-col-item title="Angular" icon="fab fa-2x fa-angular text-orange" size=4/>
    <x-adminlte-profile-col-item title="Bootstrap" icon="fab fa-2x fa-bootstrap text-orange" size=4/>
    <x-adminlte-profile-col-item title="Laravel" icon="fab fa-2x fa-laravel text-orange" size=4/>
</x-adminlte-profile-widget>

Use the next image as reference to check how every example is rendered. Please, note in the image the elements were wrapped inside a Bootstrap Grid System to organize them.

Profile Widget Component Modern

Some examples with classic layout:

{{-- Layout Classic / Minimal --}}
<x-adminlte-profile-widget name="User Name" layout-type="classic"/>

{{-- Layout Classic / Theme --}}
<x-adminlte-profile-widget name="John Doe" desc="Administrator" theme="lightblue"
    img="https://picsum.photos/id/1/100" layout-type="classic">
    <x-adminlte-profile-row-item icon="fas fa-fw fa-user-friends" title="Followers" text="125"
        url="#" badge="teal"/>
    <x-adminlte-profile-row-item icon="fas fa-fw fa-user-friends fa-flip-horizontal" title="Following"
        text="243" url="#" badge="lightblue"/>
    <x-adminlte-profile-row-item icon="fas fa-fw fa-sticky-note" title="Posts" text="37"
        url="#" badge="navy"/>
</x-adminlte-profile-widget>

{{-- Layout Classic / Custom --}}
<x-adminlte-profile-widget name="Roxana Saziadko" desc="Graphic Designer" class="elevation-4"
    img="https://picsum.photos/id/1027/100" cover="https://picsum.photos/id/130/550/200"
    layout-type="classic" header-class="text-right" footer-class="bg-gradient-teal">
    <x-adminlte-profile-col-item class="border-right text-dark" icon="fas fa-lg fa-tasks"
        title="Projects Done" text="25" size=6 badge="lime"/>
    <x-adminlte-profile-col-item class="text-dark" icon="fas fa-lg fa-tasks"
        title="Projects Pending" text="5" size=6 badge="danger"/>
    <x-adminlte-profile-row-item title="Contact me on:" class="text-center text-dark border-bottom"/>
    <x-adminlte-profile-row-item icon="fab fa-fw fa-2x fa-instagram text-dark" title="Instagram"
        url="#" size=4/>
    <x-adminlte-profile-row-item icon="fab fa-fw fa-2x fa-facebook text-dark" title="Facebook"
        url="#" size=4/>
    <x-adminlte-profile-row-item icon="fab fa-fw fa-2x fa-twitter text-dark" title="Twitter"
        url="#" size=4/>
</x-adminlte-profile-widget>

Use the next image as reference to check how every example is rendered. Please, note in the image the elements were wrapped inside a Bootstrap Grid System to organize them.

Profile Widget Component Classic

Progress

This component represents an AdminLTE styled progress bar. The following attributes are available:

Attribute Description Type Default Required
animated Enables the animated mode on the progress bar any null no
size The progress bar size (sm, xs or xxs) string null no
striped Enables stripes on the progress bar any null no
theme The progress bar theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lightblue or teal string info no
value The progress bar percentage value (integer between 0 and 100) int 0 no
vertical Enables vertical mode on the progress bar any null no
with-label Enables a percentage label on the progress bar any null no

Any other attribute you define will be directly inserted into the underlying div.progress element. So, for example, you can define a class, onclick, id or any other attribute you may need.

Javascript Utility Class

This component also provides a Javascript utility class called _AdminLTE_Progress. You can use this class to interact or update an already rendered progress bar element. To use the class, first you need to assign an id attribute to your progress bar element, then you create an object using the id attribute previously assigned in the class constructor, for example:

{{-- On the blade file... --}}
<x-adminlte-progress id="myProgress" .../>
// On your Javascript code...
let myProgress = new _AdminLTE_Progress("myProgress");

Then you can use the next methods from the instantiated object:

  • myProgress.getValue(): To get the current progress bar value.

  • myProgress.setValue(value): To update the progress bar value. The value should be an integer.

Examples

{{-- Minimal --}}
<x-adminlte-progress/>

{{-- themes --}}
<x-adminlte-progress theme="light" value=55/>
<x-adminlte-progress theme="dark" value=30/>
<x-adminlte-progress theme="primary" value=95/>
<x-adminlte-progress theme="secondary" value=40/>
<x-adminlte-progress theme="info" value=85/>
<x-adminlte-progress theme="warning" value=25/>
<x-adminlte-progress theme="danger" value=50/>
<x-adminlte-progress theme="success" value=75/>

{{-- Custom --}}
<x-adminlte-progress theme="teal" value=75 animated/>
<x-adminlte-progress size="sm" theme="indigo" value=85 animated/>
<x-adminlte-progress theme="pink" value=50 animated with-label/>

{{-- Vertical --}}
<x-adminlte-progress theme="purple" value=40 vertical/>
<x-adminlte-progress theme="orange" value=80 vertical animated/>
<x-adminlte-progress theme="navy" value=70 vertical striped with-label/>
<x-adminlte-progress theme="lime" size="xxs" value=90 vertical/>

{{-- Dinamic Change --}}
<x-adminlte-progress id="pbDinamic" value="5" theme="lighblue" animated with-label/>
{{-- Update the previous progress bar every 2 seconds, incrementing by 10% each step --}}
@push('js')
<script>
    $(document).ready(function() {

        let pBar = new _AdminLTE_Progress('pbDinamic');

        let inc = (val) => {
            let v = pBar.getValue() + val;
            return v > 100 ? 0 : v;
        };

        setInterval(() => pBar.setValue(inc(10)), 2000);
    })
</script>
@endpush

Use the next image as reference to check how every example is rendered. Please, note in the image the elements were wrapped inside a Bootstrap Grid System to organize them.

Progress Component

Small Box

This component represents an AdminLTE small box widget. The following attributes are available:

Attribute Description Type Default Required
icon A Font Awesome icon for the small box string null no
loading Enables a loading animation (an overlay with a loading icon) any null no
text The text/description for the small box string null no
theme The small box theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lightblue or teal string null no
title The title/header for the small box string null no
url An url for the small box. When enabled, a link-styled footer section will be visible pointing to that url string null no
url-text A text/label associated with the footer url string null no

Any other attribute you define will be directly inserted into the underlying div.small-box element. So, for example, you can define extra classes using the class attribute, use the onclick, the id or any other attribute you may need.

Javascript Utility Class

This component also provides a Javascript utility class called _AdminLTE_SmallBox. You can use this class to interact or update an already rendered small box element. To use the class, first you need to assign an id attribute to your small box element, then you create an object using the id attribute previously assigned in the class constructor, for example:

{{-- On the blade file... --}}
<x-adminlte-small-box id="mySmallBox" title="Title" .../>
// On your Javascript code...
let mySmallBox = new _AdminLTE_SmallBox("mySmallBox");

Then you can use the next methods from the instantiated object:

  • mySmallBox.toggleLoading(): To toggle the loading animation of the small box.

  • mySmallBox.update(data): To update the data of the small box element. The data should be an object with the new attributes, the supported object keys are: title, text, icon and url (see examples for more details).

Examples

{{-- Minimal with title, text and icon --}}
<x-adminlte-small-box title="Title" text="some text" icon="fas fa-star"/>

{{-- Loading --}}
<x-adminlte-small-box title="Loading" text="Loading data..." icon="fas fa-chart-bar"
    theme="info" url="#" url-text="More info" loading/>

{{-- Themes --}}
<x-adminlte-small-box title="424" text="Views" icon="fas fa-eye text-dark"
    theme="teal" url="#" url-text="View details"/>

<x-adminlte-small-box title="Downloads" text="1205" icon="fas fa-download text-white"
    theme="purple"/>

<x-adminlte-small-box title="528" text="User Registrations" icon="fas fa-user-plus text-teal"
    theme="primary" url="#" url-text="View all users"/>

{{-- Updatable --}}
<x-adminlte-small-box title="0" text="Reputation" icon="fas fa-medal text-dark"
    theme="danger" url="#" url-text="Reputation history" id="sbUpdatable"/>

@push('js')
<script>

    $(document).ready(function() {

        let sBox = new _AdminLTE_SmallBox('sbUpdatable');

        let updateBox = () =>
        {
            // Stop loading animation.
            sBox.toggleLoading();

            // Update data.
            let rep = Math.floor(1000 * Math.random());
            let idx = rep < 100 ? 0 : (rep > 500 ? 2 : 1);
            let text = 'Reputation - ' + ['Basic', 'Silver', 'Gold'][idx];
            let icon = 'fas fa-medal ' + ['text-primary', 'text-light', 'text-warning'][idx];
            let url = ['url1', 'url2', 'url3'][idx];

            let data = {text, title: rep, icon, url};
            sBox.update(data);
        };

        let startUpdateProcedure = () =>
        {
            // Simulate loading procedure.
            sBox.toggleLoading();

            // Wait and update the data.
            setTimeout(updateBox, 2000);
        };

        setInterval(startUpdateProcedure, 10000);
    })

</script>
@endpush

Use the next image as reference to check how every example is rendered. Please, note in the image the elements were wrapped inside a Bootstrap Grid System to organize them.

Small Box Component