Web Style Guide
Menu
Search

CarouselClick for more

A click for more element embedded in a carousel adds a bottom button to it.

Minimum requirements
  • 1 carousel
  • 1 link name (a) and 1 hyperlink (a[href])

Quick access

UsageGuidelines
HTML structurePresetsVariations
HTML
Copy to clipboard





	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsTest pageGo to top		

	

	

		
Details

		
Usage
The click for more element is used inside a carousel whenever a link to a collection of results should be added.
Guidelines
  1. The link should always be related to the items
HTML structure
Overall HTML view of a click for more element inside a carousel:
HTML file (.html)
        
(other component(s))

        
div.carousel
            
h3

            
p (optional)

            
div.arrow-left

            
div.items
                
div.item (one or more)
                    
a
                        
div[data-image] (optional)

                        
p.date (optional)

                        
p.metadata (optional)

                        
p.big-title (optional)

                        
p.title

                        
p (optional)

                    

                

            

            
div.arrow-right

            
div.click-for-more
                
a

            

        

        
(other component(s))

    
Presets
Carousel with click for more presets:
PresetDescription
DefaultDefault preset.
Variations
Carousel with click for more variations:
VariationDescription
DefaultThis snippet is composed of a carousel and a click for more button.