FSS Columns - Nested columns
All Columns Examples |
---|
FSS Documentation
Still need help?
Join the infusion-users mailing list and ask your questions there.
Nested Columns
The mark-up and classes used to produce this layout:
<div id="nested-columns-demo" class="fl-container-850 fl-centered"> <div class="fl-col-flex3"> <div class="fl-col"> <div class="fl-col-mixed-100"> <div class="fl-col-fixed fl-force-left"> <img class="fl-force-right" src="../images/tablet.png" alt="a graphic of a computer tablet"/> </div> <div class="fl-col-flex"> <p>Technology</p> <ul> <li>Operating System</li> <li>Accessibility</li> <li>Assistive Technology</li> </ul> </div> </div> </div> <div class="fl-col"> <div class="fl-col-mixed-100"> <div class="fl-col-fixed fl-force-left"> <img class="fl-force-right" src="../images/lifesaver.png" alt="a graphic of a lifesaver"/> </div> <div class="fl-col-flex"> <p>Digital Documents For Everyone</p> <ul> <li>Accessible Digital Office Document</li> <li>Alternative Format</li> </ul> </div> </div> </div> <div class="fl-col"> <div class="fl-col-mixed-100"> <div class="fl-col-fixed fl-force-left"> <img class="fl-force-right" src="../images/box.png" alt="a graphic of a box"/> </div> <div class="fl-col-flex"> <p>Workshops</p> <ul> <li>Workshop Description</li> <li>Registration Info</li> <li>About the Moderators</li> </ul> </div> </div> </div> </div> <div class="fl-col-flex3"> <div class="fl-col"> <div class="fl-col-mixed-100"> <div class="fl-col-fixed fl-force-left"> <img class="fl-force-right" src="../images/ball.png" alt="a graphic of blue globe"/> </div> <div class="fl-col-flex"> <p>Resources</p> <ul> <li>Learning Management</li> <li>Student Information</li> <li>Content Management</li> </ul> </div> </div> </div> <div class="fl-col"> <div class="fl-col-mixed-100"> <div class="fl-col-fixed fl-force-left"> <img class="fl-force-right" src="../images/list.png" alt="a graphic of checklist"/> </div> <div class="fl-col-flex"> <p>Websites for Everyone</p> <ul> <li>WCAG</li> <li>Interaction Design</li> <li>Tools</li> </ul> </div> </div> </div> <div class="fl-col"> <div class="fl-col-mixed-100"> <div class="fl-col-fixed fl-force-left"> <img class="fl-force-right" src="../images/checkmark.png" alt="a graphic of note with a checkmark"/> </div> <div class="fl-col-flex"> <p>Legislation</p> <ul> <li>About AODA</li> </ul> </div> </div> </div> </div> </div>