• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Grid

    <div class="row">
        <div class="six columns">
            <h2>1. Six</h2>

            <div class="row">
                <div class="twelve columns">
                    <h4>twelve</h4>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur, diam sed mollis auctor, leo odio scelerisque dolor, ut hendrerit dui mauris nec libero. Praesent et nisl eu enim condimentum tristique ut id nunc. Vestibulum pretium posuere tincidunt. Nunc eu feugiat risus. Nullam ipsum neque, adipiscing a lacus eget, venenatis luctus nunc. Nulla euismod posuere mauris non aliquam. Duis condimentum erat ac dolor semper, placerat eleifend neque hendrerit.</p>
                </div>
            </div>

            <div class="row">
                <div class="six columns">
                    <h4>Six</h4>

                    <div class="row">
                        <div class="six columns">
                            <h4>Six</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six</h4>
                        </div>
                    </div>
                </div>

                <div class="six columns">
                    <h4>Six</h4>

                    <div class="row collapse">
                        <div class="four columns">
                            <h4>Four</h4>
                        </div>

                        <div class="four columns">
                            <h4>Four</h4>
                        </div>

                        <div class="four columns">
                            <h4>Four</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="six columns">
            <h2>2. Six</h2>

            <div class="row">
                <div class="twelve columns">
                    <h4>twelve</h4>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur, diam sed mollis auctor, leo odio scelerisque dolor, ut hendrerit dui mauris nec libero. Praesent et nisl eu enim condimentum tristique ut id nunc. Vestibulum pretium posuere tincidunt. Nunc eu feugiat risus. Nullam ipsum neque, adipiscing a lacus eget, venenatis luctus nunc. Nulla euismod posuere mauris non aliquam. Duis condimentum erat ac dolor semper, placerat eleifend neque hendrerit.</p>
                </div>
            </div>

            <div class="row collapse">
                <div class="six columns">
                    <h4>Six</h4>

                    <div class="row">
                        <div class="six columns">
                            <h4>Six</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six</h4>
                        </div>
                    </div>
                </div>

                <div class="six columns">
                    <h4>Six</h4>

                    <div class="row">
                        <div class="six columns">
                            <h4>Six</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr />
    <div class="row nested collapse">
        <div class="six columns">
            <h2>3. Six (.nested .collapse)</h2>

            <div class="row">
                <div class="six columns">
                    <h4>3.1 Six</h4>

                    <div class="row collapse">
                        <div class="six columns">
                            <h4>Six (coll.)</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six (coll.)</h4>
                        </div>
                    </div>
                </div>

                <div class="six columns">
                    <h4>3.2 Six</h4>

                    <div class="row">
                        <div class="six columns">
                            <h4>Six</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="six columns">
            <h2>4. Six (.nested .collapse)</h2>

            <div class="row">
                <div class="six columns">
                    <h4>4.1 Six</h4>

                    <div class="row">
                        <div class="six columns">
                            <h4>Six</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six</h4>
                        </div>
                    </div>
                </div>

                <div class="six columns">
                    <h4>4.2 Six</h4>

                    <div class="row">
                        <div class="six columns">
                            <h4>Six</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr />
    <div class="row">
        <div class="six columns">
            <h2>5. Six</h2>

            <div class="row">
                <div class="six columns">
                    <h4>5.1 Six</h4>

                    <div class="row collapse">
                        <div class="six columns">
                            <h4>Six (coll.)</h4>
                        </div>

                        <div class="six columns">
                            <h4>Six (coll.)</h4>
                        </div>
                    </div>
                </div>

                <div class="six columns">
                    <h4>5.2 Six</h4>

                    <div class="row">
                        <div class="six columns">
                            <h4>Six</h4>

                            <div class="row">
                                <div class="six columns">
                                    <h4>Six</h4>
                                </div>

                                <div class="six columns">
                                    <h4>Six</h4>
                                </div>
                            </div>
                        </div>

                        <div class="six columns">
                            <h4>Six</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="six columns">
            <h2>6. Six</h2>

            <div class="row collapse">
                <div class="six columns">
                    <h4>6.1 Six (collapse)</h4>

                    <div class="row collapse">
                        <div class="six columns">
                            <h4>6.1.1 Six (coll.)</h4>

                            <div class="row collapse">
                                <div class="six columns">
                                    <h4>Six (col.)</h4>
                                </div>

                                <div class="six columns">
                                    <h4>Six (col.)</h4>
                                </div>
                            </div>
                        </div>

                        <div class="six columns">
                            <h4>6.1.2 Six (col.)</h4>

                            <div class="row">
                                <div class="six columns">
                                    <h4>Six</h4>
                                </div>

                                <div class="six columns">
                                    <h4>Six</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="six columns">
                    <h4>6.2 Six (collapse)</h4>
                </div>
            </div>
        </div>
    </div>

    <hr />
    <style type="text/css">body.section-grid #content-primary .column, body.section-grid #content-primary .columns { background-color: rgba(18, 63, 83, 0.07); border:1px solid rgba(18, 63, 83, 0.07); border-collapse:collapse; }
    body.section-grid #content-primary .collapse > .column, body.section-grid #content-primary .collapse > .columns { border:1px solid red; border-collapse:collapse; }
    body.section-grid #content-primary h2,body.section-grid #content-primary h4 { background-color: rgba(18, 63, 83, 0.07); }
    body.section-grid #content-primary .collapse > .columns > h4, body.section-grid #content-primary .collapse > .columns > h2 { background-color: rgba(213, 9, 9, 0.16); }
    </style>

     

    Previous (Date and Time)Next (Menus)