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
✔