1. Home
2. Examples
3. Event List

Event List

An event list contains a repeating group of event items. To begin, wrap this module in a <section class="event-list">. Then use <article class="event-item"> to group each individual event together.

An .event-item has the following primary child elements.

• .title - A short title that is linkable to event detail
• .description - A short summary or teaser for the event
• .start-date - Date of the event

An event list can appear in location other than the main content area. The sidebar or inside of a card for example. The markup in all cases will be exactly the same. NOTE: When used within the sidebar, the icons will be removed automatically.

Schema Options (microdata)

This module is also available as a schema.org formatted module. Many applications, especially search engines, can benefit greatly from this structured data. Pages marked up using microdata enable search engines to understand the information on web pages and provide richer search results in order to make it easier for users to find relevant information on the web.

Using microdata is optional, but highly encouraged. In the source code section, samples for plain html and the microdata version are both included.

Example:

Source Code:

    

        
Sample Event Title
        
Optional Short Description
        
Thu, 04/21/16 8:00 p.m.
    

    

        
Sample Event Title
        
Optional Short Description
        
Thu, 04/21/16 8:00 p.m.
    

    

        
Sample Event Title
        
Optional Short Description
        
Thu, 04/21/16 8:00 p.m.
    

    

        
Sample Event Title
        
Optional Short Description
        
Thu, 04/21/16 - 8:00 p.m.
    

    

        
Sample Event Title
        
Optional Short Description
        
Thu, 04/21/16 - 8:00 p.m.
    

    

        
Sample Event Title
        
Optional Short Description
        
Thu, 04/21/16 - 8:00 p.m.
    

Event List with Thumbnails

Event can also include a thumbnail image and layout that is similar to News Lists. To achieve this layout, add a .thumbnail div surrounding an image just inside the article element. Then wrap .title, .description, and .start-date in a new div called .info This will allow the image to be floated left of the information block.

Example:

Sample Event Title

Optional Short Description

Thu, 04/21/16 8:00 p.m.

Sample Event Title

Optional Short Description

Thu, 04/21/16 8:00 p.m.

Sample Event Title

Optional Short Description

Thu, 04/21/16 8:00 p.m.

Source Code:

    

        

        

            
Sample Event Title
            
Optional Short Description 
            
Thu, 04/21/16 8:00 p.m.
        
    

    

        

        

            
Sample Event Title
            
Optional Short Description
            
Thu, 04/21/16 8:00 p.m.
        
    

    

        

        

            
Sample Event Title
            
Optional Short Description
            
Thu, 04/21/16 8:00 p.m.
        
    

    

        

        

            
Sample Event Title
            
Optional Short Description
            
Thu, 04/21/16 - 8:00 p.m.
        
    

    

        

        

            
Sample Event Title
            
Optional Short Description
            
Thu, 04/21/16 - 8:00 p.m.
        
    

    

        

        

            
Sample Event Title
            
Optional Short Description
            
Thu, 04/21/16 - 8:00 p.m.
        
    

Example of events in a card:

Events can be included in a card. See Card with Photos.