๐๏ธ Badge
Badges can be used to highlight new or unread items, Limited usage is recommended, mainly for displaying numeric values in combination with other data to provide context. Do not use in place of labels, or any other similar element.
๐๏ธ Block List
A block list is a simple way to present lists of information and supports different markup schemes depending on what is most appropriate for the data. Markup can be based around ul, ol, div or link elements.
๐๏ธ Breadcrumb
A basic helper to render a list of breadcrumb links. A view should set a breadcrumbs object which will then be rendered by the base template.
๐๏ธ Button group
Group a collection of related buttons together on a single line. Great for creating toolbars.
๐๏ธ Button
Pulsar buttons are an all purpose user interface element allowing users to perform actions, submit forms and progress through transactions.
๐๏ธ Card
Cards are a flexible container for standout content with a range of configurable options for headers and footers, images and calls to action.
๐๏ธ Datatable
Datatables use the datatables.net plugin to provide a nice amount of functionality to your data. Pulsarโs configuration includes plugins to make them responsive. Where possible you should refer to the official datatable documentation.
๐๏ธ Dropdown button
Display a contextual list of actions presented as a drop down list when the button is pressed.
๐๏ธ Dropzone
The DropZone is a component that can create a pre-formatted area for users to drag files, it can also be used to convert an existing HTML element into a droppable area.
๐๏ธ Flash message
Flash messages alert the user when things happen, this may be to confirm that something has occurred successfully, like saving a document, or when something goes wrong. Flash messages may also highlight problems with the system that the user may need to know about, like a loss of network connectivity which is preventing auto-save.
๐๏ธ Icon
Help visually distinguish and provide extra meaning to certain items or actions. You can pass an icon name or mime type to generate the appropriate icon.
๐๏ธ Label
Provide extra contextual meaning to things, like stateful information.
๐๏ธ Link list
A specialised helper to create lists of links without the need to manually call multiple link helpers. Markup can be based around ul (default), ol, div or link elements.
๐๏ธ Link
Creates a simple HTML link, often used inside other helpers.
๐๏ธ List
Pass an array of items and have them rendered as a simple unordered or ordered list, this is particularly useful when chained with other helpers.
๐๏ธ Loading spinner
Give feedback to the user that something is happening or that information is being retrieved from the server.
๐๏ธ Media
The media object is, typically, an image on the left with descriptive content on the right. They can be used standalone, stacked, or as part of other components like block lists.
๐๏ธ Metadata
Provides a simple way to mark up key/value information provided by a Twig hash or JSON object.
๐๏ธ Modal
Modal windows, also known as dialogs or overlays are UI components that sit on top of the current page, usually with a semi-transparent layer behind them to separate them from the main page.
๐๏ธ Pagination
Provide a control for users to navigate through 'pages' of content and to get a sense of how many records may be available.
๐๏ธ Panel
Display important information in a prominent container.
๐๏ธ Progress Bar
Provide up-to-date feedback on the progress of a workflow or action with simple progress bars.
๐๏ธ Progress List
Show a userโs position in a multi-step workflow.
๐๏ธ Remove Button
Used by other helpers to add consistenly styled button to indicate an object can be removed.
๐๏ธ Status
Displays a small visual indication of state; helpful when used within table cells or piano list keys to avoid the need for a user to check many items individually to determine their state.
๐๏ธ Table
Tables (and the more interactive datatables) allow the presentation of tabular data. For the table layout pattern, youโll likely want to use a datatable instead of a basic table.
๐๏ธ Tooltips
Add floating labels that appear on hover or focus to provide supplemental or descriptive information.