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
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>