Widget25

Widget25 is a reusable dashboard widget control built on AdminLTE info-box and small-box components. It is designed to display key metrics, summaries, and quick navigation elements with icons, colors, and optional progress or links.

Key Features

• AdminLTE-compatible dashboard widgets
• Multiple predefined styles
• Supports FontAwesome and Icon25 icons
• Responsive grid layout
• Optional progress indicators and links

Widget Color Types

The visual appearance of a widget is controlled using WidgetColorType

• Success – Green background
• Info – Blue background
• Warning – Yellow background
• Danger – Red background

Supported Widget Styles

Widget25 provides three predefined styles, each targeting a different dashboard use case.

Style 1 – Simple Info Box

Displays a compact info box with an icon, title, and numeric value. Ideal for KPI counts such as totals, alerts, or status summaries.

Fields

• Icon – Icon from Icon25.IconCollection
• IconSize – Icon size (S1–S7)
• Title – Widget heading text
• Value – Main numeric or text value
• WidgetColorType – Background color

Example

Widget25.Style1 widget = new Widget25.Style1
{
    Title = "Total Orders",
    Value = "1250",
    Icon = Icon25.IconCollection.ShoppingCart,
    IconSize = Icon25.IconSize.S2,
    WidgetColorType = Widget25.WidgetColorType.Info
};

@Widget25.GetHtml(widget)

Style 2 – Info Box with Progress

Displays an info box with a progress bar and description. Best suited for performance metrics and completion percentages.

Fields

• Title – Widget heading
• Value – Main value
• Description – Text shown below progress bar
• Percentage – Progress bar width (0–100)
• Icon – Optional icon
• IconSize – Icon size
• WidgetColorType – Gradient background color

Example

Widget25.Style2 widget = new Widget25.Style2
{
    Title = "Order Completion",
    Value = "75%",
    Percentage = "75",
    Description = "Orders processed today",
    Icon = Icon25.IconCollection.SignalStream,
    WidgetColorType = Widget25.WidgetColorType.Success
};

@Widget25.GetHtml(widget)

Style 3 – Small Box with Link

Displays a large dashboard tile with a value, description, icon, and optional navigation link. Ideal for dashboards with drill-down navigation.

Fields

• Value – Main numeric or text value
• Description – Supporting description text
• Icon – Icon from Icon25
• FontAwesomeIcon – Direct FontAwesome class (optional)
• IconSize – Icon size
• WidgetColorType – Background color
• Link – Navigation link (same tab, new tab, or popup)

Example

Widget25.Style3 widget = new Widget25.Style3
{
    Value = "98",
    Description = "Pending Shipments",
    Icon = Icon25.IconCollection.Shipping,
    WidgetColorType = Widget25.WidgetColorType.Warning
};

widget.Link._TargetUrl = "/Shipments/Pending";
widget.Link._NewTab = false;

@Widget25.GetHtml(widget)