Icon Text Line Item

Description

The Icon Text Line Item component is a flexible element that combines an icon with accompanying text. It's designed for creating consistent, aligned items with an icon and text, such as in navigation menus or lists.

Parameters

Name Type Default Description
icon string home The name of the icon to display. This should correspond to an icon available in the UxLibrary Icon component.
color string primary The color of both the icon and text. This should be a valid Tailwind color class name.
size string sm The size of the icon and text. Valid values are xs, sm, md, lg, xl.
attributes array [] Additional HTML attributes to be applied to the component container.
slot string The text content to be displayed next to the icon.
class string flex items-center gap-2 The base CSS classes applied to the component. These classes are merged with size and color classes.

Example

There is no place like home
There is no place like home
But I love to fly
<x-uxlibrary.lists.icon-text-line-item color="primary">
    There is no place like home
</x-uxlibrary.lists.icon-text-line-item>

<x-uxlibrary.lists.icon-text-line-item icon="airplane" color="primary">
    <div>
        There is no place like home<br />
        But I love to fly
    </div>
</x-uxlibrary.lists.icon-text-line-item>