DSO Component Library

# Full Width

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <header>
        <nav class="dso-navbar dso-menu">
            <div class="dso-navbar-header">
                <button type="button" class="dso-navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="fa fa-bars" aria-hidden="true"></span>
          <span class="sr-only">Ga naar menu</span>
        </button>
            </div>
            <div class="dso-navbar-collapse dso-collapse">
                <ul class="dso-nav dso-nav-main">
                    <li class="dso-active">
                        <a href="#">
            Home
          </a>
                    </li>
                    <li>
                        <a href="#">
            Actueel
          </a>
                    </li>
                    <li>
                        <a href="#">
            Kalender
          </a>
                    </li>
                    <li>
                        <a href="#">
            Zelf aan de slag
          </a>
                    </li>
                    <li>
                        <a href="#">
            Documenten
          </a>
                    </li>
                    <li>
                        <a href="#">
            Over ons
          </a>
                    </li>
                    <li>
                        <a href="#">
            Wetgeving
          </a>
                    </li>
                </ul>

            </div>
        </nav>

    </header>
    <main>
        <div class="row dso-featured">
            <div class="col-md-6">
                <div class="dso-rich-content">
                    <h2>Welkom</h2>
                    <p>Op deze testpagina</p>
                    <h3>What is Lorem Ipsum?</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                        more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
            <div class="col-md-6">
                <dl class="dl-horizontal">
                    <dt>Description lists</dt>
                    <dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
                    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    <dt>Malesuada porta</dt>
                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                    <dt>Felis euismod semper eget lacinia</dt>
                    <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                </dl>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="dso-rich-content">
                    <ul class="list-group">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <table class="table ">
                    <caption class="sr-only">Overzicht van gebruikersnamen</caption>
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Voornaam</th>
                            <th scope="col">Achternaam</th>
                            <th scope="col">Gebruikersnaam</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

        <div class="row dso-featured">
            <div class="col-md-12">
                <div class="dso-jumbotron">
                    <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                    <div class="dso-jumbotron-body">
                        <div class="dso-rich-content">
                            <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull
                                APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                        </div>
                        <div class="dso-jumbotron-cta">
                            <button type="button" class="btn btn-link">
                <span class="icon fa fa-angle-right" aria-hidden="true"></span>
              Aan de slag
            </button>
                        </div>
                    </div>
                    <div class="dso-jumbotron-image">
                        <img src="../../dummy/images/avatar.png" alt="Alternatieve tekst"> </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="dso-rich-content">
                    <h2>History (h2)</h2>
                    <p>See also:
                        <a href="https://en.wikipedia.org/wiki/Timeline_of_The_Hague" class="extern" target="_blank">Timeline of The Hague</a>
                    </p>
                    <h3>Early history (h3)</h3>
                    <p>The Hague originated around 1230, when Count Floris IV of Holland purchased land alongside a pond, the present-day Hofvijver, in order to build a hunting residence. In 1248, his son and successor William II, King of the Romans, decided
                        to extend the residence to a palace, which would later be called the Binnenhof (Inner Court). He died in 1256 before this palace was completed but parts of it were finished by his son Floris V, of which the Ridderzaal (Knights' Hall),
                        still intact, is the most prominent.</p>
                    <h4>Trivia (h4)</h4>
                    <ul>
                        <li>The village that originated around the Binnenhof was first mentioned as Haga in a charter dating from 1242. In the 15th century, des Graven hage came into use, literally "The Count's Wood", with connotations like "The Count's Hedge,
                            Private Enclosure or Hunting Grounds".</li>
                        <li>'s-Gravenhage was officially used for the city from the 17th century onwards. Today, this name is only used in some official documents like birth and marriage certificates. The city itself uses "Den Haag" in all its communication.</li>
                    </ul>
                    <h5>More information (h5)</h5>
                    <p>See
                        <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank">Wikipedia</a>
                    </p>
                    <h3>Modern history (h3)</h3>
                    <p>Only in 1806, when the
                        <a href="https://en.wikipedia.org/wiki/Kingdom_of_Holland" class="extern" class="_blank">Kingdom of Holland</a> was a puppet state of the First French Empire, was the settlement granted city rights by Louis Bonaparte. After the Napoleonic
                        Wars, modern-day Belgium and the Netherlands were combined in the United Kingdom of the Netherlands to form a buffer against France. As a compromise, Brussels and Amsterdam alternated as capital every two years, with the government
                        remaining in The Hague. After the separation of Belgium in 1830, Amsterdam remained the capital of the Netherlands, while the government was situated in The Hague. When the government started to play a more prominent role in Dutch
                        society after 1850, The Hague quickly expanded. Many streets were specifically built for the large number of civil servants employed in the country's government and for the Dutchmen who were retiring from the administration of the
                        Netherlands East Indies.</p>
                    <h4>World War II (h4)</h4>
                    <p>The city sustained heavy damage during World War II. Many Jews were killed during the German occupation. Additionally, the Atlantic Wall was built through the city, causing a large quarter to be torn down by the Nazi occupants. On 3 March
                        1945, the Royal Air Force mistakenly bombed the Bezuidenhout quarter. The target was an installation of V-2 rockets in the nearby Haagse Bos park, but because of navigational errors, the bombs fell on a heavily populated and historic
                        part of the city. The bombardment wreaked widespread destruction in the area and caused 511 fatalities.</p>
                    <h5>More information (h5)</h5>
                    <p>See
                        <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank">Wikipedia</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="row dso-featured">
            <div class="col-md-12">
                <div class="dso-jumbotron">
                    <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                    <div class="dso-jumbotron-body">
                        <div class="dso-rich-content">
                            <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull
                                APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                        </div>
                    </div>
                    <div class="dso-jumbotron-image">
                        <img src="../../dummy/images/avatar.png" alt="Alternatieve tekst"> </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="dso-jumbotron">
                    <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                    <div class="dso-jumbotron-body">
                        <div class="dso-rich-content">
                            <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull
                                APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                        </div>
                        <div class="dso-jumbotron-cta">
                            <button type="button" class="btn btn-link">
                <span class="icon fa fa-angle-right" aria-hidden="true"></span>
              Aan de slag
            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </main>
    <footer>
        <div class="row">
            <div class="col-sm-6 col-md-3">
                <h2>Service</h2>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Sitemap</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3">
                <h2>Over deze site</h2>
                <ul>
                    <li><a href="#">Copyright</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Cookies</a></li>
                    <li><a href="#">Toegankelijkheid</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3">
                <h2>Volg ons ook op</h2>
                <ul>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">LinkedIn</a></li>
                </ul>
            </div>
        </div>
    </footer>

`
`

    <header>
      {{render '@menu' }}
    </header>
    <main>
      <div class="row dso-featured">
        <div class="col-md-6">
          <div class="dso-rich-content">
            <h2>Welkom</h2>
            <p>Op deze testpagina</p>
            <h3>What is Lorem Ipsum?</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
              dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
              specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
              essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
              passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
        <div class="col-md-6">
          <dl class="dl-horizontal">
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Felis euismod semper eget lacinia</dt>
            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
          </dl>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="dso-rich-content">
            {{render '@lists--list-group' }}
          </div>
        </div>
        <div class="col-md-6">
          {{render '@table' }}
        </div>
      </div>

      <div class="row dso-featured">
        <div class="col-md-12">
          {{render '@jumbotron--image-button' }}
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="dso-rich-content">
            <h2>History (h2)</h2>
            <p>See also:
              <a href="https://en.wikipedia.org/wiki/Timeline_of_The_Hague" class="extern" target="_blank">Timeline of The Hague</a>
            </p>
            <h3>Early history (h3)</h3>
            <p>The Hague originated around 1230, when Count Floris IV of Holland purchased land alongside a pond, the present-day
              Hofvijver, in order to build a hunting residence. In 1248, his son and successor William II, King of the Romans,
              decided to extend the residence to a palace, which would later be called the Binnenhof (Inner Court). He died in
              1256 before this palace was completed but parts of it were finished by his son Floris V, of which the Ridderzaal
              (Knights' Hall), still intact, is the most prominent.</p>
            <h4>Trivia (h4)</h4>
            <ul>
              <li>The village that originated around the Binnenhof was first mentioned as Haga in a charter dating from 1242. In the
                15th century, des Graven hage came into use, literally "The Count's Wood", with connotations like "The Count's
                Hedge, Private Enclosure or Hunting Grounds".</li>
              <li>'s-Gravenhage was officially used for the city from the 17th century onwards. Today, this name is only used in some
                official documents like birth and marriage certificates. The city itself uses "Den Haag" in all its communication.</li>
            </ul>
            <h5>More information (h5)</h5>
            <p>See
              <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank">Wikipedia</a>
            </p>
            <h3>Modern history (h3)</h3>
            <p>Only in 1806, when the
              <a href="https://en.wikipedia.org/wiki/Kingdom_of_Holland" class="extern" class="_blank">Kingdom of Holland</a> was a puppet state of the First French Empire, was the settlement granted city rights by Louis
              Bonaparte. After the Napoleonic Wars, modern-day Belgium and the Netherlands were combined in the United Kingdom
              of the Netherlands to form a buffer against France. As a compromise, Brussels and Amsterdam alternated as capital
              every two years, with the government remaining in The Hague. After the separation of Belgium in 1830, Amsterdam remained
              the capital of the Netherlands, while the government was situated in The Hague. When the government started to play
              a more prominent role in Dutch society after 1850, The Hague quickly expanded. Many streets were specifically built
              for the large number of civil servants employed in the country's government and for the Dutchmen who were retiring
              from the administration of the Netherlands East Indies.</p>
            <h4>World War II (h4)</h4>
            <p>The city sustained heavy damage during World War II. Many Jews were killed during the German occupation. Additionally,
              the Atlantic Wall was built through the city, causing a large quarter to be torn down by the Nazi occupants. On 3
              March 1945, the Royal Air Force mistakenly bombed the Bezuidenhout quarter. The target was an installation of V-2
              rockets in the nearby Haagse Bos park, but because of navigational errors, the bombs fell on a heavily populated
              and historic part of the city. The bombardment wreaked widespread destruction in the area and caused 511 fatalities.</p>
            <h5>More information (h5)</h5>
            <p>See
              <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank">Wikipedia</a>
            </p>
          </div>
        </div>
      </div>

      <div class="row dso-featured">
        <div class="col-md-12">
          {{render '@jumbotron--image' }}
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          {{render '@jumbotron--button' }}
        </div>
      </div>
    </main>
    {{render '@footer'}}

`
`

    /* No context defined for this component. */

`

- Handle: @full-width
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\06-examples\full-width.hbs
- References (7): @menu, @lists--list-group, @table, @jumbotron--image-button, @jumbotron--image, @jumbotron--button, @footer

There are no notes for this item.

### WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element.

`<h2>Welkom</h2>`

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<span class="sr-only">Ga naar menu</span>`

### NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G73,G74

If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.

`<img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">`

### NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G94.Image

Ensure that the img element's alt text serves the same purpose and presents the same information as the image.

`<img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">`

### NOTICE: WCAG2AA.Principle1.Guideline1_3.1_3_1.DataTable

This table appears to be a data table. If it is meant to instead be a layout table, ensure there are no th elements, and no summary or caption.

`<table class="table "> <caption class="sr-only">Overzicht van gebruikersnamen</caption> <thead> <tr> <th scope="col">#</th> <th scope="col">Voornaam</th> <th scope="col">Achternaam</th> <th scope="col">Gebruikersnaam</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>`

### NOTICE: WCAG2AA.Principle1.Guideline1_3.1_3_1.H39.3.Check

If this table is a data table, check that the caption element accurately describes this table.

`<table class="table "> <caption class="sr-only">Overzicht van gebruikersnamen</caption> <thead> <tr> <th scope="col">#</th> <th scope="col">Voornaam</th> <th scope="col">Achternaam</th> <th scope="col">Gebruikersnaam</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Default`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

`<a href="#"> Home </a>`

### NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

`<button type="button" class="dso-navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="fa fa-bars" aria-hidden="true"></span> <span class="sr-only">Ga naar menu</span> </button>`