App Directory UI Kit

Use the App Directory UI Kit components to ensure your application’s interface aligns with SendPulse’s style guidelines. This significantly speeds up development and ensures a consistent design.

The kit includes a single stylesheet for integration with the app directory, along with predefined classes that style text, forms, tables, buttons, and other elements.

The App Directory UI Kit allows you to:

  • Reduce layout time using all basic CSS/SASS rules bundled into one file.
  • Ensure consistency with predefined classes for text elements, forms, tables, buttons, and many more.
  • Boost your designers’ and developers’ productivity thanks to ready-to-use Figma components.

In this article, we’ll go over the main components of the App Directory UI Kit and how to use them.

On this page

Getting started

To start using the App Directory UI Kit, you must add a link to the CSS code of the kit to the <head> of your app page. No other setup steps are required.

<link rel="stylesheet" href="https://cdn.sendpulse.com/dist/css/sp-marketplace-app-ui.min.css">

To adjust the design of app directory elements, use the Figma UI Kit with all essential components.

Configure typography settings

The UI Kit includes a comprehensive set of typography styles that align with SendPulse’s design language. These styles ensure consistency and readability across your app page.

Body text

The base font size is 16px with a line height of 1.428. Paragraphs (<p>) include default vertical spacing for readability. You can use the .lead CSS class for larger introductory text.

Every paragraph block (<p>) receives a bottom margin of half its computed line-height (10px by default).

Inline text elements

Use inline text elements to stylize specific body text quickly. The following elements are available:

<mark> Highlights key content.

Helps quickly draw users’ attention to key parts of the text, such as warnings or instructions.
<del> Shows removed content.

Helps show changes in content, such as update logs or comments.
<s> Strikes text through to show outdated or irrelevant data.
<ins> Adds inserted content.

Helps show new text in updated documentation or version changes.
<u> Applies an underline.

Helps style links or emphasize key phrases in messages.
<small> Applies the secondary (smaller) text formatting.

Helps show explanatory text, such as input field descriptions or update timestamps.
<strong> Formats the text as bold.

Helps emphasize a core message or key instruction.
<em> Formats the text as italic.

Helps highlight important words or clarifications in descriptions.
<abbr> Shows a tooltip on hover.

Helps explain abbreviations, especially in forms or API specifications.

Use the .initialism CSS class for acronyms.
<blockquote> Formats the text as a quote.

Helps insert user comments or reference external reviews.

Use the .blockquote-reverse CSS class for right-aligned quotes.

Code

Use code formatting tags to display your text as programming code. The following options are available:

<code> Wraps inline snippets of code.
<kbd> Indicates input that is typically entered via keyboard.
<pre> Wraps multiple lines of code.

Add all special characters using Unicode for proper rendering.

Use the .pre-scrollable class to add a y-axis scrollbar, and set the text area’s maximum scroll height to 350px.
<var> Indicates variables.
<samp> Indicates sample output blocks.

Lists

Use the list tags or classes to group a set of related items. The following lists are available in the App Directory UI Kit:

<ul> Creates an unordered list.
<ol> Creates an ordered list.
<dl> Creates a description list with items and their descriptions displayed below with a left margin.

Long terms in horizontal lists are truncated automatically and will stack on smaller viewports.

You can also stylize unordered lists using the following CSS classes:

.list-unstyled Removes the default list style and left margin on list items (immediate children only). You need to add the class to any nested lists as well.

Useful for sidebar menus where it's important to show a list of links without default markers for a more compact design.
.list-inline Places all list items on a single line with slight padding.

Helps show navigation tabs or a list of sign-in options as a horizontal row.

Headings

Use standard HTML heading tags to highlight text or individual sections. You can also use CSS classes (.h1 through .h6) to apply heading styles to inline text without formatting it as a heading. The following headings are available:

h1 .h1 Bold 40px
h2 .h2 Bold 24px
h3 .h3 Regular 20px
h4 .h4 Regular 18px
h5 .h5 Regular 16px
h6 .h6 Regular 14px

To include secondary text within a heading, use the <small> tag or the .small class.

Text alignment and transformation

Control text alignment using the following utility classes:

.text-left Aligns text to the left.
.text-center Centers the text.
.text-right Aligns text to the right.
.text-justify Justifies text formatting.
.text-nowrap Turns off automated text wrapping.

Transform case using these classes:

.text-uppercase Makes text uppercase.
.text-lowercase Makes text lowercase.
.text-capitalize Makes text capitalized.

Configure table settings

Use table classes from the kit to ensure consistency and responsiveness on your app page. The following table classes are available:

.table Applies basic styling, including light padding and horizontal dividers on all <table> elements.
.blue-table Applies SendPulse’s default table style, including no header borders and alternating row backgrounds.
.table-striped Adds striping to <tbody> rows for improved readability (requires the :nth-child support).
.table-bordered Adds borders around all table cells and the table itself.
.table-hover Enables a hover state on <tbody> rows to highlight the row under the cursor.

Enhances user interaction, for example, when selecting a record from a contact list.
.table-condensed Reduces cell padding by half for a more compact table layout.
.table-responsive Wraps a .table to allow horizontal scrolling on screens narrower than 768 px (no effect for larger screens).

Provides a user-friendly way to view tables on mobile devices, such as viewing email campaign statistics.

Use contextual classes to format specific elements, such as table rows or individual cells. The following classes are available:

.active Applies a hover color to an entire row or cell.
.success Indicates a successful or positive action.
.info Indicates neutral, informative context.
.warning Indicates a warning that may need attention.
.danger Indicates a dangerous or potentially negative action.

Configure form settings

Add various forms to accept different kinds of user input. Every element has its own set of supported types and controls. The following form elements are available:

<form> The main container for form inputs. It can be styled as a block, inline, or horizontal.
<input> A container for various types of input, such as text or selection.

Add the disabled attribute or wrap multiple controls in <fieldset disabled> to make the field disabled or add a “not allowed” hover message.
<textarea> A container for multiline text inputs. Control the height of the text area with the rows attribute.
<select> A container for dropdown lists. For multi-selection lists, use the multiple attribute.

Add the disabled attribute or wrap multiple controls in <fieldset disabled> to make the field disabled or add a “not allowed” hover message.

You can style and control all form elements and types using classes.

Basic form controls

Apply form controls to standard text-based form types (text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color) to override their inline settings or add particular styling options using the following:

.form-control Base styling (100% width, padding, borders, and font size) for <input>, <textarea>, and <select>.
.form-control-date Overrides styles specific to <input type="date"> for consistent layout and spacing.
.form-control-time Overrides styles specific to <input type="time"> for consistent layout and spacing.
.form-control-static Styles a block of uneditable text to align it with other form controls.

Helps show a predefined value to users in the same visual style as other fields, with editing disabled.
.help-block Displays contextual, block‐level helper text beneath a form control (linked through aria-describedby).

Helps explain input formats or constraints, such as minimum password length, without cluttering the interface.

If you need multiline text input, use <textarea> with .form-control. As for dropdown lists (<select>), apply .form-control only. Browsers may impose their own rounding on native select elements.

Input groups

Apply a single style throughout several forms using form groups and their add-ons in a container to prepend or append unified elements. You can group input elements using the following classes:

.input-group Groups an <input> with its add-ons (text or buttons) into a single inline unit.

Helps insert a prefix or suffix (for example, a currency symbol or a button) directly adjacent to the input field for a more intuitive interface.
.input-group-addon Styles the element (text or button) attached immediately before or after the <input>.

Helps show units (for example, $ or .00) or action buttons directly within a single input field.

Checkboxes and radio buttons

Include checkboxes to allow users to select one or several options from a list, or add radio buttons to select one option from many. Use the following classes to wrap and control the checkbox and radio button style:

.checkbox Wraps a stacked <input type="checkbox"> and its <label>.
.radio Wraps a stacked <input type="radio"> and its <label>.
.checkbox-inline Displays a checkbox and its <label> on the same line (inline).
.radio-inline Displays a radio button and its <label> on the same line (inline).
.disabled (wrapper) Applied to .checkbox, .checkbox-inline, .radio, or .radio-inline to show a disabled cursor and give a more faded appearance.

Even if there’s no visible label text, wrap the input in .checkbox or .radio and include an aria-label on the <input> so that screen readers announce it correctly.

Validation and feedback wrappers

Wrap form controls, their labels, and helper text in validation and feedback style classes to reflect success, warning, or error states. To add a feedback icon, combine a validation class with .has-feedback and include the .form-control-feedback element inside.

.has-success Applies success styling (green) to the container and its child elements (labels, inputs, and helper text).
.has-warning Applies warning styling (yellow) to the container and its child elements.
.has-error Applies error styling (red) to the container and its child elements.
.has-feedback Absolutely positions a feedback icon inside a .form-control when combined with a validation class.
.form-control-feedback Absolutely positions the icon in a .has-feedback wrapper.
.sp-icon icon-check Renders a checkmark icon (success).
.sp-icon icon-warning Renders a warning icon.
.sp-icon icon-closed Renders an “error/closed” icon (error).

We strongly recommend including a hidden <span class="sr-only"></span> (for example, “(success)”) associated through aria-describedby so that screen readers announce the validation state.

Sizing and layout

Adjust the height of individual controls, overall form group sizes (in horizontal forms), and control widths through grid columns.

.input-lg Renders a larger/taller form control and matches the height of .btn-lg.

Helps create prominent fields, for example, in a search form with larger fonts for better readability.
.input-sm Renders a smaller/shorter form control and matches the height of .btn-sm.

Useful for compact filter panels or settings where space is limited.
.form-group-lg In a .form-horizontal layout, enlarges both label and control to a “large” size.

Useful for key form elements, such as the main input field when configuring an API key.
.form-group-sm In a .form-horizontal layout, shrinks both label and control to a “small” size.
.col-xs-2 Wrap a control in this grid column to force it to occupy 2 columns at the xs breakpoint.

Helps adjust the field width in a single row on mobile devices.
.col-xs-3 Wrap a control in this grid column to force it to occupy 3 columns at the xs breakpoint.
.col-xs-4 Wrap a control in this grid column to force it to occupy 4 columns at the xs breakpoint.

Configure button settings

Add and configure buttons on your app page using button classes in <a>, <button>, and <input> elements. Use the following classes to define the visual context, size, and state of the button:

.btn Base class for all buttons that applies padding, border, font size, and cursor.
.btn-default Neutral (“secondary”) style that applies a light background and dark text.
.btn-primary Primary action style that applies a strong blue background and white text.
.btn-success Indicates a successful or positive action that applies a green background.
.btn-info Contextual information style that applies a light blue background.
.btn-warning Indicates caution and applies an orange background.
.btn-danger Indicates a potentially dangerous action and applies a red background.
.btn-link Styles a link to look like a button (no background, just underlined text).
.btn-lg Larger/taller button that matches the height of .btn btn-lg.
.btn-sm Smaller/shorter button that matches the height of .btn btn-sm.
.btn-xs Extra small button that uses the smallest standard size.
.btn-block Makes the button span the full width of its parent container.
.active Forces a pressed appearance (darker background and inset shadow).
.disabled Visually “fades” the button and disables pointer events (for <a> and <button>).

Use disabled="disabled" in <button>.

You can apply button classes to the <a> and <button> elements. However, only <button> elements are supported within the nav and navbar components of the app directory.

Internet Explorer 9 and its earlier versions apply an unwanted text shadow to disabled <button> elements. There’s no pure CSS workaround for this issue.

Configure image element settings

Add and configure images on your app page using classes and controls. You can make images responsive and change their shape as needed.

Scale images with their parent container and center them using the following classes:

.img-responsive Applies max-width: 100%; height: auto; display: block; so that your image scales fluidly.
.center-block Centers a block‐level element horizontally (for example, a responsive image).

SVG images with .img-responsive may be mis‐sized in IE8-10. To correct this, add width: 100% \9; in a custom override — Bootstrap does not include this by default.

Apply rounding or other styling using the following classes:

.img-rounded Adds small, evenly rounded corners to your image.
.img-circle Renders your image as a perfect circle (requires a square source image).
.img-thumbnail Applies a light border, padding, and rounded corners for a thumbnail look.

Internet Explorer 8 does not support CSS‐based rounding. Images may render with square corners only.

Helper classes

Use helper classes for more element formatting options. For example, you can control text color and visibility, add a close icon, or format a form as a caret.

Contextual text colors

Use contextual text color classes to convey meaning or emphasis through color. Always ensure that any semantic meaning implied by color is also communicated through visible text or hidden screen‐reader text (for example, using .sr-only).

.text-muted Applies a lighter, muted color to deemphasize less important text (for example, “last updated”).
.text-primary Colors text with the primary brand color — commonly used for important links or calls to action.
.text-success Applies a green shade; typically used to indicate success (for example, “Settings saved”).
.text-info Applies a light blue shade; often used for informational messages or hints.
.text-warning Applies an orange shade; used to draw attention to cautionary text (for example, “Password expiring soon”).
.text-danger Applies a red shade; used to highlight errors or critical actions (for example, “Delete account”).

In some cases, emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Contextual background colors

Text background classes set a solid background color on any block‐level element. As with text colors, avoid relying on background alone for meaning — include accessible text or hidden labels as needed.

.bg-primary Applies the primary brand color as a background; useful for headers or banners.
.bg-success Applies a green background to indicate success (for example, “Operation completed”).
.bg-info Applies a light blue background for informational sections or callouts.
.bg-warning Applies an orange background to draw attention to cautionary content.
.bg-danger Applies a red background in critical or dangerous contexts (for example, error alerts).

In some cases, contextual background classes cannot be applied due to the specificity of another selector. A sufficient workaround is to wrap your element's content in a <div> with the class.

Visibility and display

Control whether an element is rendered or hidden, such as for assistive technologies, with these utility classes. They use !important to override most other display rules.

.show Forces an element to be displayed as a block, overriding any other display settings (for example, .hidden).

Helps show a hidden section of documentation only under specific conditions, such as expanding advanced integration settings.
.hidden Forces an element to be removed from the layout (display: none), hiding it from assistive technologies.

Helps temporarily remove certain forms or messages from the interface, for example, to hide a custom authentication setting option until it becomes available.
.invisible Hides an element (visibility: hidden) but allows it to occupy space in the document flow.

Helps maintain layout alignment when temporarily hiding a graphic element, for example, using a status icon to ensure that your documentation structure remains intact.

Use .hidden when you need to remove an element entirely (for example, to hide a modal). Use .invisible when you need to make an element invisible while keeping its layout space intact (for example, as a placeholder for future content).

Additional classes

Add common UI elements like close icons and carets. They are designed for specific scenarios (for example, dismissing alerts or marking dropdown lists) and should be used only in their intended contexts.

.close Styles a button (usually <button> or <a>) with minimal padding and a large “×” glyph. Used to dismiss alerts, modals, or other dismissible components.

Always include a relevant aria-label="Close" or similar attributes in elements with .close.
.caret Renders a small downward‐pointing arrow, commonly used inside dropdown toggles. In drop-up containers, it automatically flips to point upward.

Helps developers visually indicate the presence of additional integration settings (for example, selecting a communication channel) without custom graphics.

Last Updated: 13.06.2025

    Rate this article about "App Directory UI Kit"

    User Rating: 4 / 5 (9)

    Popular in Our Blog

    Try SendPulse today for free