University of Minnesota Extension
www.extension.umn.edu
612-624-1222
 Menu  Menu

Extension > Extension web templates > Page types > Gallery page example

Print Email Share

Gallery page example

Section one

Section two

Section three

Other XXXXXXXXXXX resources we recommend

Code

Page menu

<div id="pageMenu">
  <h2>On this page</h2>
  <ul class="column">
    <li><a href="#section-one">Section one</a></li>
    <li><a href="#section-two">Section two</a></li>
  </ul>
  <ul class="column last">
    <li><a href="#section-three">Section three</a></li>
    <li><a href="#other">Other XXXXXXXXXXX resources we recommend</a></li>
  </ul>
</div>

Feature section

This is just a normal module with the gallery class applied to it. It also uses two standard columns. This section is optional.

<div class="module gallery">
  <div class="column"> 
    <!--feature-->
    <div class="feature feature-wide">
    	<a href=""><img src="../program-site/features/img/03-05-2012.jpg" alt=""></a>
    	<h3><a href="">Enter headline here</a></h3>
    	<p>Enter blurb here. <a href="">More</a></p>
    </div>
    <!--/feature--> 
  </div>
  <!--/col-->
  <div class="column last"> 
    <!--feature-->
    <div class="feature feature-wide">
    	<a href=""><img src="../program-site/features/img/03-05-2012.jpg" alt=""></a>
    	<h3><a href="">Enter headline here</a></h3>
    	<p>Enter blurb here. <a href="">More</a></p>
    </div>
    <!--/feature--> 
  </div>
  <!--/col--> 
</div>
<!--/module-->

Gallery lists

Note how wrap is used on the h2's to clear the columns above. Also note how the column and last classes are applied directly to the ul to create the columns.

<h2 id="section-one" class="wrap">Section one</h2>
<ul class="galleryList column">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>
<ul class="galleryList column last">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>
<h2 id="section-two" class="section02 wrap">Section two</h2>
<ul class="galleryList column">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>
<ul class="galleryList column last">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>

Recommended links section

<h2 id="other" class="section wrap">Other XXXXXXXXXXX resources we recommend</h2>
<ul>
  <li><a href="http://www.example.com/">Praesent tincidunt dictum est</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Mauris dapibus dictum tortor</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Nam aliquam</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Aenean dui leo</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Vivamus a massa non purus</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Phasellus commodo dolor sit amet</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Vivamus lacinia nisi eu tortor</a> &ndash; Source of document</li>
</ul>
  • © 2016 Regents of the University of Minnesota. All rights reserved.
  • The University of Minnesota is an equal opportunity educator and employer. Privacy