The Components Library Collection

Website components are elements, or a combination of elements, that are transformed into interactive features using special attributes and classes. From navigation menus, pagination, and breadcrumbs, both the Foundation and Bootstrap frameworks offer their own ingredients for building these fun items.

Frameworks

The ever-growing CoffeeCup Components Library can be found within Foundation Framer, Bootstrap Builder, and the Responsive Site Designer (which has both frameworks). The library includes several of these pre-built site components so you can effortlessly insert them into your project and customize them to give your sites pizzazz. Don’t be shy, go on and try them out!

Below is a rundown of the variety of components that are currently available in each library. Check back as more features will be added in the future. If you have any suggestions about any specific components you would like to see added, shoot us a message.

 

Build your own components

Foundation and Bootstrap offer documentation with detailed markup showing you how custom components can be created. Follow along and reconstruct the code as listed using the elements in our responsive series. Be sure to add the elements in the same order, and apply the classes and attributes as instructed. Then apply your styles to shape your work into perfection.

If you're feeling brave, experiment with the interactive attributes by adding them to any element you want. You'll craft truly unique site features.

Framework documentation can be found at: Foundation | Bootstrap 3 | Bootstrap 4

Foundation Bootstrap 3 Bootstrap 4
Accordions
Basic Accordion - All Closed
Basic Accordion - Multi-Expanded
Basic Accordion
Alerts
Alert Danger With Link
N/A
Alert Danger
N/A
Alert Info With Link
N/A
Alert Info
N/A
Alert Success With Link
N/A
Alert Success
N/A
Alert Warning With Link
N/A
Alert Warning
N/A
Animations and Transitions (RSD Only)
Appearing Icons
Contra Scroll
Grey Away
Grow Color
Moving Background
Section Divider and Header
Coming Soon!
Background Videos (RSD Only)
Embed Anywhere
Hero Background - Bare
Hero Background Video
The Explainer
Badges
Badge Navigation
Coming Soon!
Coming Soon!
Badge
Coming Soon!
Coming Soon!
Blends and Filters (RSD Only)
Earlybird
Coming Soon!
Coming Soon!
Inkwell
Coming Soon!
Coming Soon!
Nashville
Coming Soon!
Coming Soon!
X-Pro li
Coming Soon!
Coming Soon!
Duo Tone Blue and Red
   
Duo Tone Clear
   
Duo Tone Green
   
Duo Tone Light Blue and Red
   
Duo Tone Light Blue
   
Duo Tone Old Brown and Red
   
Duo Tone Orange and Blue
   
Duo Tone Orange and Yellow
   
Duo Tone Pink and Purple
   
Duo Tone with Green Gradient
   
Duo Tone Red and Blue
   
Duo Tone Silhouette
   
Duo Tone Yellow and Red
   
Duo Tone Yellow Blue
   
Duo Tone Yellow Pink Gradient
   
Duo Tone Yellow with Green
   
Hero Mash
   
See Thru
   
Buttons
Alert Button
   
Alert Link Button
   
Button with Notification Badge
   
Block Level Button  
Block Level Outline Button    
Button Bar    
Button Group    
Button Outline Warning    
Button Outline Danger    
Button Outline Info    
Button Outline Primary    
Button Outline Secondary    
Button Outline Success    
Button Single Danger  
Button Single Info  
Button Single Primary  
Button Single Secondary  
Button Single Success  
Button Single Warning  
Expanded Button Link
   
Hallow Action Button
   
Hallow Alert Button Link
   
Hallow Primary Button Link
   
Hallow Secondary Button
   
Hallow Secondary Button Link
   
Hallow Success Button Link
   
Hallow Success Button
   
Hallow Warning Button Link
   
Hallow Warning Button
   
Large Button Link
   
Primary Action Button
   
Primary Action Link
   
Secondary Action Button
   
Secondary Link Button
   
Small Button Link
   
Success Link Button
   
Tiny Button Link
   
Warning Button
   
Warning Link Button
   
Download Button with Icon
Large Active Button    
Large Button  
Large Outline Button    
Small Button  
Small Outline Button    
Extra Small Button  
 
Callouts
Closeable Alert Standard
Cloud
Dropbox
   
Google Drive
   
Onedrive
   
Button Groups
Button Group Colored
   
Button Group Expended
   
Button Group Secondary
   
Button Group Small
   
Button Group
   
Cards
Card Simple and Single    
Card Using Background Image    
Expandable Feature Card
 
Header Card    
Navigation Card    
Responsive Card    
Basic Card with Wrapped Image
   
Basic Card
   
Cards in Flex Grid
   
Info Card with Call to Action Button
   
Info Card with Coupon Call
   
Info Card with Discount Offer
   
Info Card with Label
   
Info Deal Card
   
Info You Won Card
   
News Magazine
   
Promo Card with Category and Subicon Links
   
Row with Card Examples
   
Tabbed Card
   
Carousel
Carousel with Caption
N/A
Carousel
N/A
Dropdowns
Button Dropdown      
Button Single Drop Down Danger  
Button Single Dropdown Default  
Button Single Dropdown Info  
Button Single Dropdown Primary  
Button Single Dropdown Success  
Button Single Dropdown Warning  
Button Split Danger    
Button Split Default  
Button Split Info  
Button Split Primary  
Button Split Success  
Button Split Warning  
Buttons Nested    
Button Menu Dropdown  
 
Button Menu Dropup  
 
Large Split Dropdown Button    
Navigation with Dropdown Menu Horizontal    
Navigatiion with Dropdown Menu Vertical    
Right Aligned Menu    
Small Dropdown Button    
Small Split Download Button    
Small Split Dropdown Button    
Button Dropdown Toggle
   
Dropdown Bottom Right Aligned
   
Dropdown Simply Styled
   
Dropdown Toggle
   
Hoverable Dropdown
   
Hoverable Dropup
   
Pop Out Left
   
Pop Out Right
   
Footer
Footer Three Column      
Footer Two Column  
Footer with Icons  
Jumbotron
Jumbotron Fluid
N/A
Jumbotron
N/A
Navigation
Navigation Breadcrumb Simple  
Navigation Menu Standard Responsive  
Tags Pill  
Tags with Contextual Variation  
Breadcrumbs
   
Circular Pagination
   
Hero with Subnavigation
   
List Group
   
Navigation Glass with Drop
   
Navigation Sticky Note
   
Pagination with Rounded Buttons
   
Table of Contents
   
Toggle then Flex Bar
   
Top Bar with Animation
   
Pagination
Pagination Large  
Pagination Small  
Layouts
Flex-O-Magic
   
Galleries
Image Gallery Sobre      
Forms
Contact Section Footer
   
Newsletter Subscription
   
Polls
   
Simple Subscription
   
Popover
Popover Button    
Popover Left    
Popover Right    
Popover Top    
Progress Bars
Progress Bar Stacked  
 
Progress Bar Striped Danber  
 
Progress Bar Striped Info  
 
Progress Bar Success  
 
Progress Bar Striped Warning  
 
Progress Bar with Label  
 
Progress Bar  
 
Promos
Promo Section Rounded Blocks  
 
Promo Section Rounded Icons  
 
Quotes
Article Quote  
Background Testimonial
Class Quote  
Hover Quote  
Simple Quote  
Social
Rounded Animated Icon for Facebook  
Rounded Animated Icon for Github  
Rounded Animated Icon for Google  
Rounded Animated Icon for Instagram  
Rounded Animated Icon for Linked  
Rounded Animated Icon for Pinterest  
Rounded Animated Icon for Tumblr  
Rounded Animated Icon for Twitter  
Rounded Animated Icon for Youtube  
Rounded Animated Social Bar  
Social Block
Facebook
   
Github
   
Google Plus
   
Instagram
   
LinkedIn
   
Pinterest
   
Sticky Social Bar
   
Tumblr
   
Twitter
   
Vimeo
   
YouTube
   
Reveal
Full Screen Modal
   
Orbit
Orbit
N/A
N/A
Tables
Featured Table Responsive
 
Tooltips
Tooltips Button  
Tooltips Left  
Tooltips Right  
Tooltips Top  
Tabs
Tabs Column
   
Tabs Container
   
Verticle Tabs Column