Web Style Guide
Menu
Search

AccordionLinks

A link element embedded in an accordion adds interactivity to the written content.

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

Quick access

UsageGuidelines
HTML structurePresetsVariations
Advanced settings

Presets

?

Variations

?
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
# / html .html# .html? .pdf .pdf# .pdf? .xls .xls# .xls? .xlsx .xlsx# .doc .doc# .doc? .docx .docx# .zip .zip# .zip? .jpg .jpg# .jpg? .jpeg .jpeg# .jpeg? .png .mp3 .mp3# .mp3? .wav .wav# .wav? http fax: tel: mailto: youtu.be youtube twitter linkedin instagram flickr soundcloud /rss #footnote #fn
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet #
Lorem ipsum dolor sit amet /
Lorem ipsum dolor sit amet html
Lorem ipsum dolor sit amet .html#
Lorem ipsum dolor sit amet .html?
Lorem ipsum dolor sit amet .pdf
Lorem ipsum dolor sit amet .pdf#
Lorem ipsum dolor sit amet .pdf?
Lorem ipsum dolor sit amet .xls
Lorem ipsum dolor sit amet .xls#
Lorem ipsum dolor sit amet .xls?
Lorem ipsum dolor sit amet .xlsx
Lorem ipsum dolor sit amet .xlsx#
Lorem ipsum dolor sit amet .doc
Lorem ipsum dolor sit amet .doc#
Lorem ipsum dolor sit amet .doc?
Lorem ipsum dolor sit amet .docx
Lorem ipsum dolor sit amet .docx#
Lorem ipsum dolor sit amet .zip
Lorem ipsum dolor sit amet .zip#
Lorem ipsum dolor sit amet .zip?
Lorem ipsum dolor sit amet .jpg
Lorem ipsum dolor sit amet .jpg#
Lorem ipsum dolor sit amet .jpg?
Lorem ipsum dolor sit amet .jpeg
Lorem ipsum dolor sit amet .jpeg#
Lorem ipsum dolor sit amet .jpeg?
Lorem ipsum dolor sit amet .png
Lorem ipsum dolor sit amet .mp3
Lorem ipsum dolor sit amet .mp3#
Lorem ipsum dolor sit amet .mp3?
Lorem ipsum dolor sit amet .wav
Lorem ipsum dolor sit amet .wav#
Lorem ipsum dolor sit amet .wav?
Lorem ipsum dolor sit amet http
Lorem ipsum dolor sit amet fax:
Lorem ipsum dolor sit amet tel:
Lorem ipsum dolor sit amet mailto:
Lorem ipsum dolor sit amet youtu.be
Lorem ipsum dolor sit amet youtube
Lorem ipsum dolor sit amet twitter
Lorem ipsum dolor sit amet linkedin
Lorem ipsum dolor sit amet instagram
Lorem ipsum dolor sit amet flickr
Lorem ipsum dolor sit amet soundcloud
Lorem ipsum dolor sit amet /rss
Lorem ipsum dolor sit amet #footnote
Lorem ipsum dolor sit amet #fn

HTML
Copy to clipboard





	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsTest pageGo to top		

	

	

		
Details

		
Usage
The links element is used inside an accordion to add interactivity to the text allowing the user to navigate to additional content. The link element can be used inline, depending on the link destination it can feature an icon.
Guidelines
  1. Should be embedded in a accordion component
HTML structure
Overall HTML view of a links element inside an accordion:
HTML file (.html)
        
...

        
div.accordion
            
div.header

            
div.content-box
                
a

                
p
                    
a

                

            

        

        
...

    
Presets
Accordion with links presets:
PresetDescription
DefaultDefault template.
Variations
Accordion with links variations: