Web Style Guide
Menu
Search

Address box

An address box can be used to visually highlight to the user where they can find our building or a venue.

Minimum requirements
  • 1 Google Maps url (iframe[src])
  • 1 title (h2)

Quick access

UsageGuidelines
HTML structurePresetsVariations
Embedding
Nesting
Advanced settings

Presets

?

Variations

?
CITY AND/OR COUNTRY

Institution or venue name

The Institution/venue is located here:

  • Lorem-ipsumstraße 123, 12345 Musterstad, Germany
  • 567 Main st, Anytowm, PA 17123, USA
  • 78 Rue de Exemple, 75007 Paris, France

Further details and link go here.

Lorem ipsum dolor sit amet

Lorem ipsum

Lorem ipsum dolor sit amet

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








	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsEmbeddingNestingTest pageGo to top		

	

	

		
Details

		
Usage
The address box component is used to display a Google map on your page.
Guidelines
  1. Should be place only in contact pages
  2. Apart from the src attribute, the iframe tag should always include:
    • frameborder="0"
    • scrolling="no"
    • marginheight="0"
    • marginwidth="0"
  3. On the other hand, the src attribute should include the parameters:
    • z=13
    • output=embed
HTML structure
Overall HTML view of an address box component:
HTML file (.html)
        
(other component(s))

        
div.address-box
            
iframe

            
div.headline (optional)

            
h2

            
div.wrapper
                
div.content-box
                    
h3

                    
ul
                        
li (one or more)

                    

                

                
div.content-box (optional)
                    
p

                    
a

                

            

        

        
(other component(s))

    
Presets
Address box presets:
PresetDescription
DefaultDefault preset.
BasicPreset with the minimum requirements of the component.
Presets are ready to use HTML structures.
Variations
Address box variations:
VariationDescription
DefaultThis snippet feature 3 major areas. The first one is composed of an iframe, headline and title. The second area is composed of a title and an unordered list to display information regarding the address. And a third area which work as an additional call to action.
BasicThis snippet gets rid of additional elements which might not be present, reducing it to the minimum requirements.
Embedding
The address box component cannot be embedded inside other component.
main (HTML file)
        
(component)
            
div.address-box

        

    
Nesting
The address box component cannot be used as a container of other components and/or elements.
main (HTML file)
        
div.address-box
            
(Element)