HTML
                                    <img src="./images/OBA_rood_rgb.png" alt="OBA logo rood">
                                    <img src="./images/OBA_zwart_rgb.png" alt="OBA logo zwart">
                                    <img src="./images/OBA logo wit.png" alt="OBA logo wit">

                                    css
                                    logos img {
                                        width: 10rem;
                                        margin: 2rem;
                                    }
                                
                            

                            

                                HTML
                                <div class="jeugd">
                                    <div class="babies">
                                        <img src="https://i.ibb.co/PwjCttS/oba-0-6-jaar.png" alt="jeugd 0-6 jaar">
                                        <h4>0-6 jaar <h4>
                                        <p>beschrijving...</p>
                                    <div >
                                
                                css
                                    .jeugd {
                                        display: flex;
                                    }
                                    
                                    .jeugd img {
                                        width: 22rem;
                                        margin: 2rem;
                                    }
                            
                        

                                HTML
                                <div class="articles">
                                    <article>
                                        <img src="https://i.ibb.co/ph8QQBc/cover-stenen-eten.jpg" alt="cover stenen eten">
                                        <h4>titel</h4>
                                        <h5>auteur</h5>
                                    </article>

                                css
                                .articles {
                                    display: flex;
                                    text-align: center;
                                }
                                
                                article img {
                                    width: 5rem;
                                    height: 7rem;
                                    margin: 1rem;
                                    box-shadow: 0.2rem 0.2rem #D9D9D9;
                                }

                            

Forms

Text Inputs

Text input maakt het mogelijk voor de gebruiker om gegevens invoeren. Dit kan gaan om bijvoorbeeld een enkele regel tekst, selecties aan de hand van checkboxes en keuzerondjes of opdrachten tot het verzenden van de ingevoerde informatie.

OBA gebruikt nu weinig tot geen styling voor forms. In deze living styleguide staat een nieuw voorstel voor de vormgeving van forms.

Zoekbalken

Er zijn twee verschillende zoekbalken weergegeven:

• Gebruik een grijze zoekbalk in geval van een witte achtergrond
• Gebruik een witte zoekbalk in geval van een grijze achtergrond

Het is de bedoeling dat de grijze zoekbalk alleen wordt gebruikt in de navigatie omdat deze nu een witte achtergrond heeft. De witte zoekbalk wordt gebruikt in de main omdat deze een grijze achtergrond heeft. Bij zoekbalken staat het zoek-icoontje altijd links in de balk en heeft het altijd een placeholder met bijvoorbeeld "Zoek..." om duidelijk te maken dat het om een zoekbalk gaat. Bij deze zoekbalk zit de input en het icoon ín het form element. Klik hier voor een concreet voorbeeld van de code.

Gebruik

• Margin
• Border-radius
• Padding op form element
• Focus

Overige text inputs

Voor andere textinputs geldt ongeveer dezelfde weergave.

De input is altijd wit (omdat wij werken op een grijze achtergrond) en het label staat links. Ook hier staat een placeholder indien nodig. In plaats van dat hier het icoon in het form element zit, heeft het nu een label links. Klik hier voor een concreet voorbeeld van de code.

• Label
• Padding op input element
• Margin
• Ruimte

Voorbeeld code

Codevoorbeeld zoekbalk:

                HTML:
                
                <form>
                    <i class="bx bx-search icon"></i>
                    <input type="text" placeholder="placeholder">
                </form>
                
                CSS:
                
                form i {
                    margin-right: 1rem;
                    font-size: 1.25rem;
                }

                form {
                    display: flex;
                    align-items: center;
                    padding: 0.5rem 0.75rem;
                    height: 1.5rem; 
                    border-radius: 0.75rem;
                    width: 20rem; /* verander zoals gewenst */
                    background: white;
                }

                input {
                    height: 100%;
                    width: 100%;
                    font-size: 1rem;
                    font-family: AvenirMedium 'sans serif';
                    outline: none;
                    border: none;
                }
                
                

Codevoorbeeld overige text input:

                HTML:
                
                <form>
                    <label class="label" for="label">Label</label>
                    <input type="text" id="label" placeholder="placeholder">
                </form>
                
                CSS:
                
                form {
                    display: flex;
                    align-items: center;
                    width: 20rem; /* verander zoals gewenst */
                }

                form input {
                    padding: 0.5rem 0.5rem;
                    border-radius: 0.75rem;
                    border: none;
                    outline: 0;
                    font-family: AvenirMedium 'sans serif';
                    font-size: 1rem;
                    height: 1.5rem;
                }

                form label {
                    margin-right: 1rem;
                    font-family:  Verdana, Arial, Helvetica, sans-serif;
                }
                
                

                    
                        <button aria-pressed="false" class="" onclick="boeken()" tabindex="0"
                                 type="button"> boeken overzicht
                        button>


                    

                

                    

                        .button, .reset-button, .filterbutton {
                        border: none;
                        box-shadow: 10px 5px 5px var(--toggle-color);
                        background-color: var(--background-color-buttons-white);
                        /*color: #202121;*/
                        /*background-color: #DDFF00;*/
                        font-size: 1em;
                        font-family: AvenirMedium;
                        border-radius: 6px;
                        padding: 0.5rem;
                        margin-left: 0.2em;
                        margin-top: var(--margin-1em);
                        /*color: white;*/
                    }

                     

                    

           <table aria-label="dit is de tabel met het overzichtboetepagina">
               <tr>
                   <th id="naam" scope="col">naam boek </th>
              <th id="datum" scope="col">datum in te leveren</th>
               </tr>
              <tr>
                   <td headers="naam">ajax jaarboek </td>
              <td headers="datum">28-12-2023</td>
              </tr>
               <tr>
                   < td>devils wears prada</td>
              <td> 15-10-2023</td>
             </td>
               < tr>
                   <td>psv jaarboek</td>
                    <td>15-12-2023</td>
              </tr>
               <tr>
                   <td>gijp</td>
                  < td>10-11-2023< /td>
               </tr>
                <tr>
                   <td>nirwana </td>
                  <td>14-2-2023</td>
              < /tr>
               < tr>
                   <td>afkowobo</td>
              <td>19-10-2023</td>
              </tr>
           <table>

                    
                

                    
                        th {
                    /*color: #FFFFFF;*/
                    background-color: #ffffff;
                    border: var(--border-color-line);
                    /*border: 1px solid #dddddd; !*  hier word een randje meegegeven aan de th  *!*/
                    font-size: 1.5em;
                    line-height: 1.5;


                }

                /*dit zijn de celblockej*/
                td {
                    background-color: #ffffff;
                    border: var(--border-color-line);
                    font-size: 1em;
                    line-height: 1.5;
                    margin: var(--margin-1em);


                }