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.
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 | |||
Alert Danger | |||
Alert Info With Link | |||
Alert Info | |||
Alert Success With Link | |||
Alert Success | |||
Alert Warning With Link | |||
Alert Warning | |||
Animations and Transitions (RSD Only) | |||
Appearing Icons | |||
Contra Scroll | |||
Grey Away | |||
Grow Color | |||
Moving Background | |||
Section Divider and Header | |||
Background Videos (RSD Only) | |||
Embed Anywhere | |||
Hero Background - Bare | |||
Hero Background Video | |||
The Explainer | |||
Badges | |||
Badge Navigation | |||
Badge | |||
Blends and Filters (RSD Only) | |||
Earlybird | |||
Inkwell | |||
Nashville | |||
X-Pro li | |||
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 | |||
Carousel | |||
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 | |||
Jumbotron | |||
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 | |||
Github | |||
Google Plus | |||
Sticky Social Bar | |||
Tumblr | |||
Vimeo | |||
YouTube | |||
Reveal | |||
Full Screen Modal | |||
Orbit | |||
Orbit | |||
Tables | |||
Featured Table Responsive | |||
Tooltips | |||
Tooltips Button | |||
Tooltips Left | |||
Tooltips Right | |||
Tooltips Top | |||
Tabs | |||
Tabs Column | |||
Tabs Container | |||
Verticle Tabs Column |