Packs
Browse our collection of Seed Packs!
-
Base
Low-level styles that target base elements and selectors.
Baseseed-basebasehtmltypographyheadingparagraph -
Reset
Normalizes HTML element styles to ensure better consistency and adherence to modern standards.
Baseseed-resetbasecleannormalnormalizerebootreset -
Alert
Component that provides contextual feedback for actions. Includes support for a variation of states.
Componentseed-alertalertstatus -
Avatar
Component that stylizes images for use as avatars. Includes support for a variation of sizes and styles.
Componentseed-avataravatarimage -
Badge
Component that helps indicate status. Includes support for a variation of states.
Componentseed-badgebadgecountlabel -
Button
Component for user-actions. Includes support for a variation of sizes, styles, and states.
Componentseed-buttonbtnbuttonformlink -
Card
Component that provides a flexible UI container. Includes support for a variation of sizes.
Componentseed-cardblockcardcontainerpanelwrapper -
Dot nav
Component used for navigation or progression represented with series of dots. Includes support for a variation of sizes and styles.
Componentseed-dot-navdotdotnavdot navnavprogress -
Dropdown
Component to encapsulate multiple user-actions . Includes support for a variation of sizes, styles, and states.
Componentseed-dropdownbootstrapdropdownselect -
Form group
Component that groups form elements like labels and inputs within a web form.
Componentseed-form-groupcontrolfieldsetformform groupformgroupinput -
Horizontal rule
Component that provides styling for a horizontal line.
Componentseed-hrborderdividedividerhorizontalhrrule -
Input addons
Components to provide additional context for form inputs. Includes support for a variation of sizes.
Componentseed-input-addonsadd-onaddonaddonsappendcontrolformformcontrolinputprependstatic -
Input
Component for user-input. Includes support for a variation of sizes and states.
Componentseed-inputcontrolfieldformformcontrolinputselecttextarea -
Link
Component that provides styling for links.
Componentseed-linkanchorlink -
List
Component that provides styling for a lists.
Componentseed-listbulletlistnumbernumberedorderedunorderedunstyleunstyled -
Modal
Component that provides styling for modals. This component uses Bootstrap's Javascript to handle the interactions.
Componentseed-modalbootstrapmodaloverlay -
Nav
Component used for navigation represented with a list of links. Includes support for a variation of sizes and styles.
Componentseed-navnavnavigationstacktabtabnavnavtabnavtabstabs -
Navbar
Component used for the main header navigation, with support for links and dropdowns, optimized for multiple device sizes
Componentseed-navbarnavbarnavigationnavcollapsenav barbarheader -
Option card
Component that enhances the UI of an input checkbox or radio.
Componentseed-option-cardcardcheckcheckboxoptionoptionsradioselecttile -
Pagination
Component used for paginated navigation represented with a list of numbered links. Includes support for a variation of sizes and styles.
Componentseed-paginationnavpaginationpager -
Popover
Component that provides styling for popovers. This component uses Bootstrap's Javascript to handle the interactions.
Componentseed-popoverbootstrappopovertooltip -
Progress bar
Component that provides a progress feedback. Includes support for a variation of sizes.
Componentseed-progress-barbarfeedbackloadingprogressprogressbarstatus -
Switch
Component that provides a switch-like appearance for checkbox or radio form elements.
Componentseed-switchcheckcheckboxinputswitch -
Table
Component that stylizes tables. Includes support for a variation of sizes and styles.
Componentseed-tabledatarowtabletbodythread -
Thumbnail
Component that stylizes images for use as thumbnails. Includes support for a variation of sizes and styles.
Componentseed-thumbnail16:9featuredfeaturedimageimageimgportraitsquarethumbthumbnail -
Tooltip
Component that provides styling for tooltips. This component uses Bootstrap's Javascript to handle the interactions.
Componentseed-tooltipbootstraptooltip -
Video
Component that provides responsive behavior to video embeds.
Componentseed-videoembediframeobjectvideowistiayoutube -
Color scheme (Help Scout)
A color scheme configuration based on Help Scout's color palette.
Configseed-color-scheme-helpscoutbrandcolor schemeconfighelp scout -
Control
A configuration of sizes for controls, such as inputs and buttons.
Configseed-controlconfigcontrol -
States
A configuration of styles for states, such as error or success.
Configseed-statesconfigstatesstate -
Dash
Functions that get, set, and extend Sass maps.
Functionseed-dasharraydashdeepdeep extendextendfunctionfunctionalgethelperlibrarylistlodashmapmapssetunderscoreutil -
This
A function that reliably gets the current working selector.
Functionseed-thiscurrentfunctionrootscopeselectorthisvariable -
Breakpoints
A collection of mixins that work with CSS media queries.
Mixinseed-breakpointsbreakpointmediamixinqueryresponsive -
Color scheme
A mixin that defines and manages a Sass color scheme configuration.
Mixinseed-color-schemecolormixinschemesystemvariable -
Family
Mixins that enable manipulation of parent or sibling selectors.
Mixinseed-familyfamilyparentselectorsibling -
Props
A function/mixin combo that provides callback-like functionality with Sass maps.
Mixinseed-propsargumentarraycallbackfunctionmapsmixinobjectproppropsvariable -
Publish
Mixin that acts as an include guard, preventing undesired duplication of compiled CSS styles.
Mixinseed-publishexcludeexportguardheaderimportoncepublish -
Control group
Object classes that align and group form-based elements together.
Objectseed-control-groupbtn-groupcontrolgroupbtnbutton groupsegment -
Flexy
Object classes that uses flexbox to intelligently align items together.
Objectseed-flexyalignalignmentflexflexboxflexyfloatpullvertical -
Grid system
Object classes that provide grid structure.
Objectseed-gridcolcolumncontainergridlayoutresponsiverow -
Inline
Object classes that properly adjacent align elements together.
Objectseed-inlineinlinelist -
Responsive wrapper
Object class that provides horizontal scrolling when overflow occurs.
Objectseed-responsive-wrappercontainerresponsiveoverflowscrollscrollbarwrapper -
Border
Thematic classes to adjust border styles.
Themeseed-borderborderradius -
Colors (Help Scout)
Thematic classes to adjust background and text colors – based on the Help Scout color scheme.
Themeseed-helpscout-themehelpscoutcolorthemebgtexttxfontcolor -
Shadow
Thematic classes to adjust box-shadow styles.
Themeseed-shadowanimateboxbox-shadowboxshadowdrophovershadow -
Typography
A collection of typography based styles.
Textseed-typographyboldfontheadersizesizesizingtexttxtypetypographyweight -
Bootstrap Fade
Fade utility class abstracted from Bootstrap
Utilityseed-bootstrap-fadeanimationbootstrapfade -
Centralize
Vertically and horizontally alignment elements.
Utilityseed-centralizealigncentermiddlevertical -
Display
Utility classes that adjust the display styles of elements.
Utilityseed-displayblockdisplayhiddenhideinlineinline-blockinlineblockresponsive -
Floats
Utility classes that provide floating and clearfixing styles to elements.
Utilityseed-floatsclearclearfixfloatlayoutleftpullright -
Opacity
Utility classes that adjust the opacity value of elements.
Utilityseed-opacityopacitytransparencytransparentvisibility -
Overflow
Utility classes that adjust the overflow styles of elements.
Utilityseed-overflowhiddenoverflowscroll -
Position
Utility classes that adjust the position styles of elements.
Utilityseed-positionabsolutefixedpositionrelative -
Spacing
Utility classes that provide a range of margin and padding adjustment styles.
Utilityseed-spacinglayoutmarginmrgpadpaddingspacespacing -
Vertical Align
Utility classes that adjust the vertical alignment of inline elements.
Utilityseed-vertical-alignaligncenterinlinemiddletextvertical -
Visibility
Utility classes that adjust the visibility styles of elements.
Utilityseed-visibilityinvisiblevisibility -
Width (Fixed)
Utility classes that provide a range of fixed width (px) sizes.
Utilityseed-width-fxfixedfixedwidthfxpixelpxwidth -
Width (Max)
Utility classes that provide a range of max width (%) sizes.
Utilityseed-width-maxmaxmaxwidthwidth -
Width (Min)
Utility classes that provide a range of min width (%) sizes.
Utilityseed-width-minminminwidthwidth -
Width
Utility classes that provide a range of width (%) sizes.
Utilityseed-widthwidth -
Z-Index
Utility classes that provide a range of z-index values.
Utilityseed-zilayerzz-indexzindex
</div>
</div>