VUB styleguide


version: 0.1.1 | last update: menu updated

Welcome to the VUB styleguide – an internal guide & code repository for designing and coding projects for VUB. If you're new here, have a look through some of the topics on the left.


USEFULL LINKS TO READ:

Styles

Colors

/sass/_globals.scss

Primary colors

Always provide different shades of the primary colors. For a more high-level approach on color use, head over to IBM Design Language.

  • $dark
    HEX: #2F3742
  • $medium
    HEX: #3F4A59
  • $light-extra
    HEX: #FFFFFF
  • $orange
    HEX: #FF6600
  • $blue
    HEX: #003399

UI-kit colors

Primary colors for interaction feedback, notifications and states: error (red), warning (orange), success (green) and information (blue). UI-kit colors should always be aligned with the tone of voice of the application/brand.

  • $ui-red
    HEX: #c93f30
  • $ui-orange
    HEX: #e37224
  • $ui-green
    HEX: #2a8b3d
  • $ui-blue
    HEX: #b77b2

Typography

/sass/base/_typography.scss

Reading experience

Typography is the atomic element of good interface design as it defines branding, layout, composition & rhythm. Note that it's not just about choosing the right typeface, it's also about tone of voice, microcopy. Head over to IBM Design Language for an in-depth overview on the elements of typography.

Good reading experiences have the right amount of characters per line. If a line is too long users will have a hard time focusing, if a line is too short the eye will have to travel back too often, breaking the reader's rhythm. An optimal line length is 50-75 characters, which is about 10-12 words or 25-33 × base font-size (1em). To increase readability of typographic elements, default letter-spacing values for headings & small text are adjusted.

Font stack

Titles: TeX Gyre Adventor & Roboto Condensed
Text: Roboto
Base font-size: 16px

<h1> - TeX Gyre Adventor (700) - 60px - line-height: 1.025


Good design is good business




<h2> - TeX Gyre Adventor (700) - 30px - uppercase - line-height: 1.025


Good design is always obvious, while great design is always transparent




<h3> - Roboto Condensed (700) - 26px - uppercase - line-height: 1.45


While everything is designed, only few things are designed to excell




<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4> - TeX Gyre Adventor (700) - 22px - line-height: 1.45


Content is king and should always precede design. Design in the absence of content is not design, but decoration.




<p> - Roboto (300) - 16px - line-height: 1.7


Many desperate acts of design (e.g. gradients, drop shadows, and the gratuitous use of transparency) are perpetuated in the absence of a strong concept. Good ideas provide a framework for design, guiding the work.




<h4>Heading 4</h4>
<p>Paragraph</p>
<h5> - Roboto Condensed (700) - 14px - uppercase - line-height: 1.55


Online design trends change more often than the wind and slightly less often than my socks. Good design is timeless, good design creates culture. Culture shapes value and value determinates the future.



<h5>Heading 5</h5>
Hyperlinks: <a href="">, <span class="is-hyperlink"> This is a hyperlink
This looks like a hyperlink
<a href="#" title="Always provide a title">Hyperlink</a>
<span class="is-hyperlink">This looks like a hyperlink</span>
Strong: <strong> This text is strong
Emphasized: <em> This text is emphasized
Quotes: <q> This text is quoted
Obsolete/deleted/updated: <del> This text is obsolete/deleted/updated
<strong>This text is strong</strong>
<em>This text is emphasized</em>
<q>This text is quoted</q>
<del>This text is obsolete/deleted/updated</del>

Lists

/sass/base/_lists.scss

Implementation

By default lists are not included in base/_normalize.scss. Each class extending the default (e.g. inline-list) must handle the reset in itself. Usually this means resetting the padding-left value and adjust the list-style property.

Default lists: <ul>, <ol>
  • Sed ut perspiciatis unde omnis
  • Sed ut perspiciatis unde omnis
  • Label for nested list items
    • Nested list items
    • Nested list items
    • Nested list items

  1. Sed ut perspiciatis unde omnis
  2. Sed ut perspiciatis unde omnis
  3. Label for nested list items
    • Nested list items
    • Nested list items
    • Nested list items
Inline list: <ul class="inline-list">
  • List item
  • List item
  • List item
<ul class="inline-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Icons

/sass/base/_icons.scss

Implementation

The icon-set is converted with a custom Gulp iconfont-task. To add/remove icons from the generated font, please contact Little Miss Robot or use an online service like IcoMoon. Warning: using an online service could break stuff!

  • .icon-support
  • .icon-international
  • .icon-research
  • .icon-study


  • .icon-arrow-up
  • .icon-arrow-down
  • .icon-arrow-left
  • .icon-arrow-right
  • .icon-full-arrow-left
  • .icon-full-arrow-right
  • .icon-search
  • .icon-social-instagram
  • .icon-social-youtube
<span class="icon-{{name}}"></span>

Grid system

/sass/base/_layout.scss

Columns

Basic grid classes for layout purposes, has no extra margins & paddings applied to items and will work with anything (class based).

Optionally the grid system can be extended to include default margins which can be used in general, multi-column page layouts. Add the .has-default-margins class to the wrapping container for this to work.

<div class="rd-container {{has-default-margins}}">

    <div class="rd-col-1-1">  100%  </div>
    <div class="rd-col-1-2">  50%  </div>
    <div class="rd-col-1-3">  33%  </div>
    <div class="rd-col-1-4">  25%  </div>

    <div class="rd-col-2-3">  66%  </div>
    <div class="rd-col-3-4">  75%  </div>

</div>
.rd-col-1-1
.rd-col-1-2
.rd-col-1-2
.rd-col-1-3
.rd-col-1-3
.rd-col-1-3
.rd-col-1-3
.rd-col-2-3
.rd-col-2-3
.rd-col-1-3
.rd-col-1-4
.rd-col-1-4
.rd-col-1-4
.rd-col-1-4
.rd-col-1-4
.rd-col-3-4
.rd-col-3-4
.rd-col-1-4

Extended with margins: <div class="rd-container rd-has-default-margins">

.rd-col-1-1
.rd-col-1-2
.rd-col-1-2
.rd-col-1-3
.rd-col-1-3
.rd-col-1-3
.rd-col-1-3
.rd-col-2-3
.rd-col-2-3
.rd-col-1-3
.rd-col-1-4
.rd-col-1-4
.rd-col-1-4
.rd-col-1-4
.rd-col-1-4
.rd-col-3-4
.rd-col-3-4
.rd-col-1-4

Rows

Since we need to fit everything on 1 page, it's important to define a a height on each of of the grid items as well. We can combine this we the columns to create a flexible layout system.

<div class="rd-container styleguide__grid styleguide__rowgrid">
    <div class="rd-col-1-4">
        <div class="rd-row-1-1">.rd-row-1-1</div>
    </div>
    <div class="rd-col-1-4">
        <div class="rd-row-1-2">.rd-row-1-2</div>
        <div class="rd-row-1-2">.rd-row-1-2</div>
    </div>
    <div class="rd-col-1-4">
        <div class="rd-row-1-3">.rd-row-1-3</div>
        <div class="row-2-3">.rd-row-2-3</div>
    </div>
    <div class="rd-col-1-4">
        <div class="rd-row-1-4">.rd-row-1-4</div>
        <div class="rd-row-3-4">.rd-row-3-4</div>
    </div>
</div>
.rd-row-1-1
.rd-row-1-2
.rd-row-1-2
.rd-row-1-3
.rd-row-2-3
.rd-row-1-4
.rd-row-3-4

Atoms

Buttons

/sass/components/_buttons.scss

Implementation

Use <a> for navigation, <button> for everything else. Submit/reset buttons are the only exceptions, using <input[type="submit"]> to trigger default browser behaviour associated with submitting form input. Buttons should follow a typographic scale, based on importance and base font-size.

Primary buttons: <button class="button{{-color}}"> Primary button
<button class="rd-button">Primary button</button>


<button class="rd-button">
    <span class="icon-{{name}}"></span>
    <span class="is-hidden">Always provide fallback text</span>
</button>

<button class="rd-button">
    <span class="icon-{{name}}"></span>
    <span>Button with icon before</span>
</button>

<button class="rd-button">
    <span>Button with icon after</span>
    <span class="icon-{{name}}"></span>
</button>

<button class="rd-button" disabled>Disabled state</button>

Secondary buttons

Buttons for in-line interactions, as used in toolbars (eg. close, add, remove, ...).
General markup: <button class="button-secondary ">


<button class="rd-button-secondary">Secondary button</button>

<button class="rd-button-secondary">
    <span class="icon-{{name}}"></span>
    <span class="is-hidden">Always provide fallback text</span>
</button>

<button class="rd-button-secondary">
    <span class="icon-{{name}}"></span>
    <span>Button with icon before</span>
</button>

<button class="rd-button-secondary">
    <span>Button with icon after</span>
    <span class="icon-{{name}}"></span>
</button>

<button class="rd-button-secondary" disabled>Disabled state</button>

Forms Elements

/sass/base/_forms.scss

General principle

Each input field should have a label and inform users about the kind of input they need to provide. This info-text switches functionality during the user flow: information becomes inline validation/immediate feedback. The tone of voice should be human and add personality to the experience/brand.

Implementation

Every form should have an action- and method-attribute. To encourage default browser behaviour, the submit button should be added as input[type=submit]. Every input should have a label with corresponding for-, id- and name-attributes. Labels are always placed before inputs, nesting is not allowed (except for checkboxes and radio's).

Input

Tell the user what kind of input is expected, add a clickthrough as needed
Don't worry, we won't spam you. Read our privacy policy.
Passwords should be 6 characters or more. Be tricky!
Not what you expected? Please contact our customer support.
Don't worry, we only contact you when it's absolutely necessary.
Tell us a little bit more about yourself.
Can't find what you're looking for? Try our frequently asked questions
<div class="input">
    <label for="{{name}}">Label</label>
    <div>
        <input type="{{type}}"
               name="{{name}}"
               id="rd-{{name}}"
               placeholder="{{text}}"
        />
    </div>
    <small>Guidance text</small>
</div>
Feedback, suggestions, ideas, ... we would love to hear from you!
<div class="input">
    <label for="{{name}}">Label</label>
        <div>
            <textarea type="{{type}}"
                      name="{{name}}"
                      id="rd-{{name}}"
                      cols="30"
                      rows="5"
                      placeholder="{{text}}">
            </textarea>
        </div>
    <small>Guidance text</small>
</div>

Upload

By default upload fields aren't easy to style in a specific look& feel. The trick is to use a hidden field to display input value and some additional javascript to make this work.

Note: Javascript functionality in the source code is just a prototype (not present in production /js/main.js). The actual submit/upload functionality is also not implemented.

Tell the user what kind of input is expected, add a clickthrough as needed
<div class="input">
    <label for="{{name}}">Label</label>
    <div class="input__upload">

        <input type="text" name="{{name}}" id="{{name}}" placeholder="" />
        <input type="file" name="{{input}}" id="{{input}}" />
        <input type="submit" class="button" value="{{button label}}" />

    </div>
    <small>Guidance text</small>
</div>
<script>

    document.getElementById("{{input}}").onchange = function() {
        document.getElementById("{{name}}").value = this.value;
    };

</script>

Range slider

By default range sliders aren't easy to style in a specific look& feel. In roder to get it working, some additional javascript is needed. Changing the slider value will reveal a tooltip with the actual value.

<div class="input">
    <label for="{{name}}">Label</label>
    <div>

        <input type="range"
               name="{{input}}"
               id="{{input}}"
               min="{{min value}}"
               max="{{max value}}"
               step="{{step}}"
               value="{{actual value}}"
        />
        <span class="range__background"></span>
        <span class="range__background" id="{{background}}">

            <span class="tooltip-up" id="{{tooltip}}"></span>

        </span>
    </div>
</div>

Radios & checkboxes

Radio, checkboxes and toggles are wrapped inside a label to enable the default browser behaviour.

<div class="input">

    <label class="input__radio">
        <input type="radio" name="{{name}}" value="{{value}}" />
        <span class="icon"></span>
    </label>

    <label class="input__checkbox">
        <input type="checkbox" name="{{name}}" value="{{value}}" />
        <span class="icon-checkmark"></span>
    </label>

</div>

Toggles

Toggles are extended checkboxes, to be used if the context implies a yes/no condition.

<div class="input">

    <label class="input__toggle">
        <input type="checkbox" name="{{name}}" value="{{value}}" />
        <span class="icon toggle"></span>
        <span class="icon-checkmark"></span>
        <span class="icon-cross"></span>
    </label>

</div>

Feedback

/sass/components/_alerts.scss
/sass/components/_tooltips.scss

General principle

Always provide feedback on user interaction. This can be immediate (eg. inline validation) or after the action (eg. submit a form). Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.

Default: <div class="rd-alert">

This is a feedback message.

Error: <div class="rd-alert rd-is-error">

Something went wrong, please try again.

Warning: <div class="rd-alert is-warning">

Perhaps you meant something else.

Success alert: <div class="rd-alert is-success">

Now how about adding some more.

Information alert: <div class="rd-alert is-information">

Some features might not work.

<div class="rd-alert">
    <p class="icon-alert">Default alert message</p>
</div>

<div class="rd-alert is-error">
    <p class="icon-alert">Error message</p>
</div>

<div class="rd-alert is-warning">
    <p class="icon-alert">Warning message</p>
</div>

<div class="rd-alert is-success">
    <p class="icon-checkmark">Success message</p>
</div>

<div class="rd-alert is-information">
    <p class="icon-alert">Information message</p>
</div>

Tooltips

Use tooltips to display inline information or validation feedback. Just like default alerts, different styling can be applied (error, warning, success and information). Although tooltips will work with any typographic style, the use of <small> is adviced.

General markup: <small class="tooltip{{-direction}} {{state}}">

Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
<small class="tooltip-{{direction}} {{state}}">Tooltip</small>

<small class="tooltip-up is-error">Error tooltip</small>
<small class="tooltip-right is-warning">Warning tooltip</small>
<small class="tooltip-down is-success">Success tooltip</small>
<small class="tooltip-left is-information">Information tooltip</small>

Decorators & inline validation

Always provide immediate/inline feedback on user interaction. Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.

Disabled input/select: <input disabled />, <select disabled />
<div class="input">
    <label for="{{name}}">Label</label>
    <div>
        <input type="{{type}}" {{disabled}}
               name="{{name}}"
               id="{{name}}"
               placeholder="{{text}}"
        />
        <span class="icon-{{name}}"></span>
    </div>
</div>

Feedback states: <div class="input {{state}}">
Feedback messages are shown onfocus

What a lovely name!
Tell the user what kind of input is expected, add a clickthrough as needed
Your password should be at least 6 characters. Be tricky!
Your password should be at least 6 characters. Be tricky!
This email is already registered. Do you want to login or recover password?
Don't worry, we won't spam you. Read our privacy policy.
<div class="input is-success">...</div>
<div class="input is-warning">...</div>
<div class="input is-error">...</div>

Molecules

Main Navigation

/sass/components/_navigation.scss

The main navigation will always be placed on a photo background and contains the primary navigation on the website



info voor
<div class="rd-main-navigation-block">
    <div class="rd-logo-vub"></div>
    <nav class="rd-main-navigation">
        <div class="rd-menu-item">
            <a href="#">studeren</a>
            <div class="rd-sub-menu">
                <div class="rd-container has-default-margins">
                    <div class="rd-col-1-4">
                        <h5>Visie & Beleid</h5>
                        <a href="#">VUB Visie</a>
                        <a href="#">VUB Waarden</a>
                        <a href="#">Historiek</a>
                        <a href="#">Feiten en cijfers</a>
                        <a href="#">Universitair charter Goed bestuur</a>
                    </div>
                    <div class="rd-col-1-4">
                        <h5>Info</h5>
                        <a href="#">VUB Visie</a>
                        <a href="#">VUB Waarden</a>
                        <a href="#">Historiek</a>

                        <h5>Studeren in brussel</h5>
                        <a href="#">Feiten en cijfers</a>
                        <a href="#">Universitair charter Goed bestuur</a>
                    </div>
                    <div class="rd-col-1-4">
                        <h5>Campussen</h5>
                        <a href="#">VUB Visie</a>
                        <a href="#">VUB Waarden</a>
                        <a href="#">Historiek</a>
                    </div>
                    <div class="rd-col-1-4">
                        <h5>Faculteiten</h5>
                        <a href="#">Letteren en wijsgebeerte</a>
                        <a href="#">Lichamelijke opvoeding en
kinesitherapie</a>
                        <a href="#">Wetenschappen en bioingenieurs-
wetenschappen</a>
                        <a href="#">Letteren en wijsgebeerte</a>
                        <a href="#">Lichamelijke opvoeding en
kinesitherapie</a>
                        <a href="#">Wetenschappen en bioingenieurs-
wetenschappen</a>
                    </div>
                </div>
                <div class="rd-social">
                    Volg ons op
                    <a href="#" class="icon-social-facebook"></a>
                    <a href="#" class="icon-social-twitter"></a>
                    <a href="#" class="icon-social-instagram"></a>
                    <a href="#" class="icon-social-youtube"></a>
                </div>
            </div>
        </div>
        <div class="rd-menu-item">
            <a href="#">onderzoek</a>
            <div class="rd-sub-menu">
                //--- submenu ---//
            </div>
        </div>
        <div class="rd-menu-item">
            <a href="#">internationalisering</a>
            <div class="rd-sub-menu">
                //--- submenu ---//
            </div>
        </div>
        <div class="rd-menu-item">
            <a href="#">innovatie</a>
            <div class="rd-sub-menu">
                //--- submenu ---//
            </div>
        </div>
        <div class="rd-menu-item">
            <a href="#">universiteit</a>
            <div class="rd-sub-menu">
                //--- submenu ---//
            </div>
        </div>
    </nav>

    <div class="rd-right-menu-block">
        <nav class="rd-language-navigation">

            <a href="#">English</a>
            <a href="#">Nederlands</a>

        </nav>
        <div class="rd-info-block">
            info voor <span class="icon-arrow-down"></span>
            <div class="rd-sub-menu">
                <ul>
                    <li>
                        <a href="#">Studenten</a>
                    </li>
                    <li> <a href="#">Personeel</a></li>
                    <li><a href="#">Ouders</a></li>
                    <li><a href="#">Alumni</a></li>
                    <li><a href="#">doctorandi</a></li>
                </ul>
            </div>
        </div>
        <div class="rd-search-block">
            <span class="icon-search"></span>
            <div class="rd-sub-search">
                <input type="search" placeholder="search" />
            </div>
        </div>
    </div>
</div>

<div class="rd-mobile-navigation-block">
    <div class="rd-logo-vub"></div>
    <div class="rd-menu-button icon-hamburger">
        <nav class="rd-main-navigation">
            <div class="rd-menu-item"> <a href="#">studeren</a></div>
            <div class="rd-menu-item"> <a href="#">onderzoek</a></div>
            <div class="rd-menu-item"> <a href="#">internationalisering</a></div>
            <div class="rd-menu-item"> <a href="#">innovatie</a></div>
            <div class="rd-menu-item"><a href="#">universiteit</a></div>
        </nav>
    </div>
</div>

Secondary Navigation

/sass/components/_navigation.scss

The main navigation will always be placed on a photo background and contains the primary navigation on the website





<nav class="rd-secondary-navigation">
    <div class="rd-navigation-holder">
        <div class="rd-navigation-inner">
            <a href="#" class="rd-is-active">Faculteit</a>
            <a href="#">Opleidingen</a>
            <a href="#">Alumni</a>
            <a href="#">Onderzoek</a>
            <a href="#">Contact</a>
        </div>
    </div>
</nav>

Tab navigation

/sass/components/_navigation.scss

The tab navigation can be used to toggle between different sections within a page.



<nav class="rd-tab-navigation">
    <a href="#" class="rd-is-active">Voor reguliere studenten</a>
    <a href="#">Voor werkstudenten</a>
    <a href="#">Voor uitwisselingstudenten</a>
</nav>

Sidebar navigation

/sass/components/_navigation.scss

The sidebar navigation can be used to navigate through a long content block and is typically placed to the left of this content block.



<nav class="rd-sidebar-navigation">
    <a href="#" class="rd-is-active">Aanpak</a>
    <a href="#">Meerwaarde onderzoek</a>
    <a href="#">Studiefaciliteiten</a>
</nav>

Header slide

/sass/components/_hero.scss

The header slide is a big bero box that can be used to promote a specific story or article in the header.

inzicht

Slide title

Volg het onderzoek van onze VUB-vulcanoloog

Ontdek meer
<div class="rd-gallery">
    <div class="rd-hero" style="background-image: url('img/layout/default-header.jpg')">
        <div class="rd-v-center-outer">
            <div class="rd-v-center">
                <div class="rd-v-center-inner">
                    <div class="rd-inner-slide">
                        <h3>inzicht</h3>
                        <h1>Slide title</h1>
                        <p>Volg het onderzoek van onze VUB-vulcanoloog</p>
                        <a href="#" class="rd-button">Ontdek meer</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Spotlight

/sass/components/_spotlight.scss

The spotlight can be used to highlight a few key areas on the website. Each spotlight is represented by its own unique background-image & icon.



Kom studeren aan VUB
<div class="rd-spotlight">
    <div class="rd-container">
        <a href="#" class="rd-col-1-2" style="background-image: url('img/layout/default-thumb.jpg')">
            <h4>Kom studeren aan VUB</h4>
        </a>
    </div>
</div>

Dividing Image

/sass/components/_hero.scss

The dividing image is a big hero box that stretches across the page and can be used to create a visual boundary on a page. This is perfectly suited to use at the start of a new section on a long page.

Studeren aan de vub

Start hier!
<section class="rd-hero" style="background-image:url('img/layout/default-header.jpg')">
    <div class="rd-v-center-outer">
        <div class="rd-v-center">
            <div class="rd-v-center-inner">
                <h2>Studeren aan de vub</h2>
                <a href="#" class="rd-button">Start hier!</a>
            </div>
        </div>
    </div>
</section>

Opleidings blok

/sass/components/_opleidingen.scss

This module provides everything you need to easily allow the user to select a certain field of education. There are 2 different kind of links in this module: an internal one ( which opens up a new section ) and an external one. ( which links to a new page )


<ul class="rd-opleidingen">
     <li>
         <a href="#" class="rd-is-active">Bacheloropleidingen<span></span></a>
     </li>
     <li>
         <a href="#">Masteropleidingen<span></span></a>
     </li>
     <li>
         <a href="#">Manama’s<span></span></a>
     </li>
     <li>
         <a href="#">Postgraduaten<span></span></a>
     </li>
     <li>
         <a href="#" class="rd-external">Bachelor of Science in de biomedische wetenschappen<span></span></a>
     </li>
     <li>
         <a href="#" class="rd-external">Bachelor of Science in de farmaceutische wetenschappen<span></span></a>
     </li>
     <li>
         <a href="#" class="rd-external">Exchange agreements<span></span></a>
     </li>
</ul>

Article

/sass/components/_article.scss

Articles are multi-functional components which can be used to display news & events.
The extra headline (h5) is optional and can be used to display a timestamp for events


VUB'er David trekt alle registers open in The Voice van Vlaanderen

Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.

<a href="#" class="rd-article rd-col-1-2">
    <div class="rd-article-thumb">
        <img src="img/layout/default-thumb.jpg" />
    </div>
    <div class="rd-article-header">
        <h4>VUB'er David trekt alle registers open in The Voice van Vlaanderen </h4>
    </div>
    <p>
        Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.
    </p>
</a>

Logo

/sass/components/_logos.scss

Logo are functional components which can be used to display partners & or logos.


<div class="rd-cols rd-logos">
    <a class="rd-logo rd-col-1-2">
        <span class="image-helper"></span>
        <img class="rd-logo-image" src="img/layout/logo.svg" />
    </a>
    <a class="rd-logo rd-col-1-2">
        <span class="image-helper"></span>
        <img class="rd-logo-image" src="img/layout/logo.svg" />
    </a>
</div>

Tile

/sass/components/_tile.scss

Tiles are multi-functional components which can be used to display small snippets of information in a grid.
There are 2 types of tiles: the default tile has a background, title & button. The custom tile is empty and can be used to manually insert HTML.


Werk op VUB

Vacatures

Custom tile

Custom tile content.

<!-- TILE WITH BACKGROUND -->
<div class="rd-tile rd-col-1-2 rd-hero" style="background-image: url('img/layout/default-header.jpg')">
    <div class="rd-v-center-outer">
        <div class="rd-v-center">
            <div class="rd-v-center-inner">
                <h4>Werk op VUB</h4>
                <a href="#" class="rd-button">Vacatures</a>
            </div>
        </div>
    </div>
</div>

<div class="rd-tile rd-col-1-2">
    <h3>Custom tile</h3>
    <hr/>
    <p>
        Custom tile content.
    </p>
</div>

Team Member

/sass/components/_team.scss

A collapsable widget that holds all the information for a team member.


Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
<div class="rd-team-member">
    <div class="rd-member-top">
        <div class="rd-headshot">
            <img src="img/layout/default-square-thumb.jpg" />
        </div>
        <h5>Mathieu Vinken</h5>
        <h6>Prof. Dr. Pharm</h6>
        <p>
            Vrije Universiteit Brussel
        </p>
        <a href="#" class="icon-arrow-down rd-js-open-member"></a>
    </div>
    <div class="rd-member-intro">
        <p>
            Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
        </p>
        <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
    </div>
</div>

Testimonial

/sass/components/_testimonials.scss

A module that holds a testimonial which consists of a profile picture, name, function and 1 or more paragraphs of text.


Arlene
1e bachelor

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<div class="rd-testimonials-header">
    <a href="#" class="rd-js-show-testimonial rd-is-active" data-ref="testimonial-1">
        <div class="rd-headshot">
            <img src="img/layout/default-square-thumb.jpg" />
        </div>
        <h5>Arlene</h5>
        <h6>1<sup>e</sup> bachelor</h6>
    </a>
</div>
<div class="rd-testimonials-content">
    <div class="rd-testimonial rd-is-visible" id="testimonial-1">
        <p>
            Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </p>
    </div>
</div>

Content Sections

/sass/components/_content.scss

The content sections hold large chunks of text and can be use to display all sort of extra relevant components such as images, quotes, sidebar navigation, etc...

Connect Team

The CONNECT team (connexin and pannexin channels as drug targets and biomarkers in acute and chronic liver disease) is part of the Department of In Vitro Toxicology and Dermato-Cosmetology of the Faculty of Medicine and Pharmacy at the Vrije Universiteit Brussel-Belgium and the Department of Pathology of the School of Veterinary Medicine and Animal Science of the University of São Paulo-Brazil.

<section class="rd-content">
    <div class="rd-container">
        <div class="rd-content-holder">
            <h4>Connect Team</h4>
            <p>
                The CONNECT team (connexin and pannexin channels as drug targets and biomarkers in acute and chronic liver disease) is part of the Department of In Vitro Toxicology and Dermato-Cosmetology of the Faculty of Medicine and Pharmacy at the Vrije Universiteit Brussel-Belgium and the Department of Pathology of the School of Veterinary Medicine and Animal Science of the University of São Paulo-Brazil.
            </p>
        </div>
    </div>
</section>

Connect Team

The CONNECT team (connexin and pannexin channels as drug targets and biomarkers in acute and chronic liver disease) is part of the Department of In Vitro Toxicology and Dermato-Cosmetology of the Faculty of Medicine and Pharmacy at the Vrije Universiteit Brussel-Belgium and the Department of Pathology of the School of Veterinary Medicine and Animal Science of the University of São Paulo-Brazil.

<section class="rd-content rd-intro">
    <div class="rd-container">
        <div class="rd-content-holder">
            <h2>Connect Team</h2>
            <p>
                The CONNECT team (connexin and pannexin channels as drug targets and biomarkers in acute and chronic liver disease) is part of the Department of In Vitro Toxicology and Dermato-Cosmetology of the Faculty of Medicine and Pharmacy at the Vrije Universiteit Brussel-Belgium and the Department of Pathology of the School of Veterinary Medicine and Animal Science of the University of São Paulo-Brazil.
            </p>
        </div>
    </div>
</section>

Sterke opleidingen en sterk onderzoek

De faculteit met haar twee opleidingen rechten en criminologie wordt algemeen erkend voor haar studentgericht en kwalitatief onderwijs dat studenten vormt tot kritische en redelijk eigenzinnige wereldburgers. Onze alumni bekleden daarom zeer vaak sleutelposities in internationale en regionale organisaties, in de Belgische politiek, de magistratuur, de advocatuur, de ambtenarij, de politionele diensten, het bedrijfsleven en het maatschappelijk middenveld. Het onderwijs op onze faculteit wordt gevoed door een traditie in het wetenschappelijk onderzoek. Onderzoek dat op bepaalde domeinen tot ver buiten onze landsgrenzen geroemd wordt. De waarden van onze universiteit indachtig, zijn wij ook maatschappelijk geëngageerd en proberen we deze ingesteldheid mee te geven aan onze studenten zodat zij de uitdagingen van deze wereld niet onverschillig en onvoorbereid tegemoet gaan.

Wilfried Rauws, Rector Recht en Criminologie
<section class="rd-content rd-extra-left">
    <div class="rd-container">
        <div class="rd-content-holder">
            <h4>Sterke opleidingen en sterk onderzoek</h4>
            <p>
                // CONTENT GOES HERE //
            </p>
        </div>
        <div class="rd-content-extra">
            <img src="img/layout/default-square-thumb.jpg" />
            <small>Wilfried Rauws, Rector Recht en Criminologie</small>
        </div>
    </div>
</section>
At the Belgian side, the Vrije Universiteit Brussel group is responsible for mechanistic and in vitro experimentation, whereas at the Brazilian side, the University of São Paulo group supervises the animal experiments.
<section class="rd-content rd-extra-right">
    <div class="rd-container">
        <div class="rd-content-holder">
            <img src="img/layout/default-header.jpg" />
        </div>
        <div class="rd-content-extra">
            <blockquote>
                // QUOTE GOES HERE //
            </blockquote>
        </div>
    </div>
</section>

Organisms

Header

/sass/components/_header.scss

The header consists of a top section, a header element that contains the logo, main navigation, a gallery with slides and an optional spotlight.

info voor

inzicht

In het spoor van Vulkanen?!

Volg het onderzoek van onze VUB-vulcanoloog

Ontdek meer

research

Let the music play

Jean-Pierre Baeyens onderzoekt spierproblemen bij muzikanten

Ontdek meer

Kom studeren aan VUB

Kom studeren aan VUB

Kom studeren aan VUB

Kom studeren aan VUB


<section class="rd-top">
    <div class="rd-main-navigation-block">
        <div class="rd-logo-vub"></div>
        
        <nav class="rd-main-navigation">
            <div class="rd-menu-item">
                <a href="#">studeren</a>
                <div class="rd-sub-menu">
                    <div class="rd-container rd-has-default-margins">
                        <div class="rd-col-1-4">
                            <h5>Visie & Beleid</h5>
                            <a href="#">VUB Visie</a>
                            <a href="#">VUB Waarden</a>
                            <a href="#">Historiek</a>
                            <a href="#">Feiten en cijfers</a>
                            <a href="#">Universitair charter Goed bestuur</a>
                        </div>
                        <div class="rd-col-1-4">
                            <h5>Info</h5>
                            <a href="#">VUB Visie</a>
                            <a href="#">VUB Waarden</a>
                            <a href="#">Historiek</a>

                            <h5>Studeren in brussel</h5>
                            <a href="#">Feiten en cijfers</a>
                            <a href="#">Universitair charter Goed bestuur</a>
                        </div>
                        <div class="rd-col-1-4">
                            <h5>Campussen</h5>
                            <a href="#">VUB Visie</a>
                            <a href="#">VUB Waarden</a>
                            <a href="#">Historiek</a>
                        </div>
                        <div class="rd-col-1-4">
                            <h5>Faculteiten</h5>
                            <a href="#">Letteren en wijsgebeerte</a>
                            <a href="#">Lichamelijke opvoeding en
kinesitherapie</a>
                            <a href="#">Wetenschappen en bioingenieurs-
wetenschappen</a>
                            <a href="#">Letteren en wijsgebeerte</a>
                            <a href="#">Lichamelijke opvoeding en
kinesitherapie</a>
                            <a href="#">Wetenschappen en bioingenieurs-
wetenschappen</a>
                        </div>
                    </div>
                    <div class="rd-social">
                        Volg ons op
                        <a href="#" class="icon-social-facebook"></a>
                        <a href="#" class="icon-social-twitter"></a>
                        <a href="#" class="icon-social-instagram"></a>
                        <a href="#" class="icon-social-youtube"></a>
                    </div>
                </div>
            </div>
            <div class="rd-menu-item">
                <a href="#">onderzoek</a>
                <div class="rd-sub-menu">
                    //--- submenu ---//
                </div>
            </div>
            <div class="rd-menu-item">
                <a href="#">internationalisering</a>
                <div class="rd-sub-menu">
                    //--- submenu ---//
                </div>
            </div>
            <div class="rd-menu-item">
                <a href="#">innovatie</a>
                <div class="rd-sub-menu">
                    //--- submenu ---//
                </div>
            </div>
            <div class="rd-menu-item">
                <a href="#">universiteit</a>
                <div class="rd-sub-menu">
                    //--- submenu ---//
                </div>
            </div>
        </nav>



        <div class="rd-right-menu-block">

            <nav class="rd-language-navigation">

                <a href="#">English</a>
                <a href="#">Nederlands</a>

            </nav>

            <div class="rd-info-block">
                info voor <span class="icon-arrow-down"></span>
                <div class="rd-sub-menu">
                    <ul>
                        <li>
                            <a href="#">Studenten</a>
                        </li>
                        <li> <a href="#">Personeel</a></li>
                        <li><a href="#">Ouders</a></li>
                        <li><a href="#">Alumni</a></li>
                        <li><a href="#">doctorandi</a></li>
                    </ul>





                </div>
            </div>
            <div class="rd-search-block">
                <span class="icon-search"></span>
                <div class="rd-sub-search">
                    <input type="search" placeholder="search" />
                </div>

            </div>
        </div>
    </div>
</section>

<header class="rd-with-spotlight">

    <div class="rd-gallery">
        <div class="rd-hero rd-slide" id="slide-1" style="background-image: url('img/layout/default-header.jpg')">
            <div class="rd-v-center-outer">
                <div class="rd-v-center">
                    <div class="rd-v-center-inner">
                        <div class="rd-inner-slide">
                            <h3>inzicht</h3>
                            <h1>In het spoor van Vulkanen?!</h1>
                            <p>Volg het onderzoek van onze VUB-vulcanoloog</p>
                            <a href="#" class="rd-button">Ontdek meer</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rd-hero rd-slide" id="slide-2" style="background-image: url('img/layout/default-header-2.jpg')">
            <div class="rd-v-center-outer">
                <div class="rd-v-center">
                    <div class="rd-v-center-inner">
                        <div class="rd-inner-slide">
                            <h3>research</h3>
                            <h1>Let the music play</h1>
                            <p>Jean-Pierre Baeyens onderzoekt spierproblemen bij muzikanten</p>
                            <a href="#" class="rd-button">Ontdek meer</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rd-slide-navigation">
            <a href="#" class="rd-is-active" id="dot-1"></a>
            <a href="#" id="dot-2"></a>
        </div>
    </div>
    <div class="rd-spotlight">
        <div class="rd-container">
            <a href="" class="rd-col-1-4" style="background-image: url('img/layout/default-thumb.jpg')">
                <h4>Kom studeren aan VUB</h4>
            </a>
            <a href="" class="rd-col-1-4" style="background-image: url('img/layout/default-thumb.jpg')">
                <h4>Kom studeren aan VUB</h4>
            </a>
            <a href="" class="rd-col-1-4" style="background-image: url('img/layout/default-thumb.jpg')">
                <h4>Kom studeren aan VUB</h4>
            </a>
            <a href="" class="rd-col-1-4" style="background-image: url('img/layout/default-thumb.jpg')">
                <h4>Kom studeren aan VUB</h4>
            </a>
        </div>
    </div>
</header>

Footer

/sass/components/_footer.scss

The footer holds the basic contact information and a simple sitemap.

<footer>
    <div class="rd-container rd-has-default-margins">
        <div class="rd-col-1-4 rd-contact-info">
            <img src="img/layout/logo-white.svg" />
            <hr/>
            <p>
                Pleinlaan 2 1050 Brussel
                <br/> 02/629.20.10
                <br/>
                <a href="mailto:info@vub.ac.be">info@vub.ac.be</a>
            </p>
            <a href="#" class="icon-social-facebook"></a>
            <a href="#" class="icon-social-twitter"></a>
            <a href="#" class="icon-social-instagram"></a>
            <a href="#" class="icon-social-youtube"></a>
        </div>
        <div class="rd-col-3-4 rd-footer-navigation">
            <div class="rd-col-1-4">
                <h5>Onderwijs</h5>
                <a href="#">bachelors</a>
                <a href="#">masters</a>
                <a href="#">Postgraduaat</a>
            </div>
            <div class="rd-col-1-4">
                <h5>Onderwijs</h5>
                <a href="#">bachelors</a>
                <a href="#">masters</a>
                <a href="#">Postgraduaat</a>
            </div>
            <div class="rd-col-1-4">
                <h5>Onderwijs</h5>
                <a href="#">bachelors</a>
                <a href="#">masters</a>
                <a href="#">Postgraduaat</a>
            </div>
            <div class="rd-col-1-4">
                <h5>Onderwijs</h5>
                <a href="#">bachelors</a>
                <a href="#">masters</a>
                <a href="#">Postgraduaat</a>
            </div>
        </div>
        <div class="rd-col-1-1 rd-creator">
            Created by webmaster
        </div>
    </div>
</footer>

Stories

/sass/components/_stories.scss

The stories module consists of a section header which contains the section title and a read more link, and several articles.

Wat er leeft op de VUB

Meer Nieuws

VUB'er David trekt alle registers open in The Voice van Vlaanderen

Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.

VUB'er David trekt alle registers open in The Voice van Vlaanderen

Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.

VUB'er David trekt alle registers open in The Voice van Vlaanderen

Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.

<section class="rd-stories">
    <div class="rd-container">
        <div class="rd-section-header">
            <h2>Wat er leeft op de VUB</h2>
            <a href="#" class="rd-section-more">Meer Nieuws<span></span></a>
        </div>
        <div class="rd-section-content rd-has-default-margins">
            <a href="#" class="rd-article rd-col-1-3">
                <div class="rd-article-thumb">
                    <img src="img/layout/default-thumb.jpg" />
                </div>
                <div class="rd-article-header">
                    <h4>VUB'er David trekt alle registers open in The Voice van Vlaanderen </h4>
                </div>
                <p>
                    Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.
                </p>
            </a>
            <a href="#" class="rd-article rd-col-1-3">
                <div class="rd-article-thumb">
                    <img src="img/layout/default-thumb.jpg" />
                </div>
                <div class="rd-article-header">
                    <h4>VUB'er David trekt alle registers open in The Voice van Vlaanderen </h4>
                </div>
                <p>
                    Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.
                </p>
            </a>
            <a href="#" class="rd-article rd-col-1-3">
                <div class="rd-article-thumb">
                    <img src="img/layout/default-thumb.jpg" />
                </div>
                <div class="rd-article-header">
                    <h4>VUB'er David trekt alle registers open in The Voice van Vlaanderen </h4>
                </div>
                <p>
                    Student. Werknemer. Zanger. In de eerste ronde van The Voice van Vlaanderen blies David maar liefst twee juryleden van hun stoel. Vandaag valt hij te bewonderen in een battle op VTM. opnemen voor de volgende stap: de liveshow.
                </p>
            </a>
        </div>
    </div>
</section>

Opleidingen

/sass/components/_opleidingen.scss

The opleidingen module consists of an optional dividing image, and a combination of several opleidingen-components, displayed in a 3 column grid.

Studeren aan de vub

Start hier!

Opleidingen:

Faculteiten:

Studies:

<section class="rd-hero" style="background-image:url('img/layout/default-header.jpg')">
    <div class="rd-v-center-outer">
        <div class="rd-v-center">
            <div class="rd-v-center-inner">
                <h2>Studeren aan de vub</h2>
                <a href="#" class="rd-button">Start hier!</a>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="rd-container rd-has-default-margins">
        <div class="rd-col-1-3">
            <h4>Opleidingen:</h4>
            <ul class="rd-opleidingen">
                <li>
                    <a href="#" class="rd-is-active">Bacheloropleidingen<span></span></a>
                </li>
                <li>
                    <a href="#">Masteropleidingen<span></span></a>
                </li>
                <li>
                    <a href="#">Manama’s<span></span></a>
                </li>
                <li>
                    <a href="#">Postgraduaten<span></span></a>
                </li>
            </ul>
        </div>
        <div class="rd-col-1-3">
            <h4>Faculteiten:</h4>
            <ul class="rd-opleidingen">
                <li>
                    <a href="#">Bacheloropleidingen<span></span></a>
                </li>
                <li>
                    <a href="#">Masteropleidingen<span></span></a>
                </li>
                <li>
                    <a href="#" class="rd-is-active">Manama’s<span></span></a>
                </li>
                <li>
                    <a href="#">Postgraduaten<span></span></a>
                </li>
                <li>
                    <a href="#">Bacheloropleidingen<span></span></a>
                </li>
                <li>
                    <a href="#">Masteropleidingen<span></span></a>
                </li>
            </ul>
        </div>
        <div class="rd-col-1-3">
            <h4>Studies:</h4>
            <ul class="rd-opleidingen">
                <li>
                    <a href="#" class="rd-external">Bacheloropleidingen<span></span></a>
                </li>
                <li>
                    <a href="#" class="rd-external">Masteropleidingen<span></span></a>
                </li>
                <li>
                    <a href="#" class="rd-external">Manama’s<span></span></a>
                </li>
            </ul>
        </div>
    </div>
</section>

In de Kijker

/sass/components/_kijker.scss

The "in de kijker" module is a 4 column grid that consists of several tiles, each with it's own unique functionality.

Werk op VUB

Vacatures
Campus security

02 629 21 76

Campus security

02 629 21 76

Campus security

02 629 21 76

Vragen over VUB & Brussel?

Vacatures

VUB Nieuwsbrief

Mis geen enkele update!
<section class="rd-in-de-kijker">
    <div class="rd-container rd-has-default-margins">
        <div class="rd-tile rd-col-1-4 rd-hero" style="background-image: url('img/layout/default-header.jpg')">
            <div class="rd-v-center-outer">
                <div class="rd-v-center">
                    <div class="rd-v-center-inner">
                        <h4>Werk op VUB</h4>
                        <a href="#" class="rd-button">Vacatures</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="rd-tile rd-col-1-4">
            <h6>Campus security</h6>
            <h2>02 629 21 76</h2>
            <hr/>
            <h6>Campus security</h6>
            <h2>02 629 21 76</h2>
            <hr/>
            <h6>Campus security</h6>
            <h2>02 629 21 76</h2>
        </div>
        <div class="rd-tile rd-col-1-4 rd-hero" style="background-image: url('img/layout/default-header.jpg')">
            <div class="rd-v-center-outer">
                <div class="rd-v-center">
                    <div class="rd-v-center-inner">
                        <h4>Vragen over VUB & Brussel?</h4>
                        <a href="#" class="rd-button">Vacatures</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="rd-tile rd-col-1-4">
            <h4>VUB Nieuwsbrief</h4>
            <hr/>
            <h6>Mis geen enkele update!</h6>
            <form>
                <input type="email" placeholder="E-mailadres *" />
                <input type="submit" value="schrijf je in" class="rd-button" />
            </form>
        </div>
    </div>
</section>

Logo's

/sass/components/_logos.scss

The "Logo's" module is a 4 column grid that consists of several tiles with logo's, each with it's own unique functionality.

Logo's

<section class="rd-logos">
    <div class="rd-container">
        <div class="rd-section-header">
            <h2>Logo's</h2>
        </div>
        <div class="rd-section-content rd-has-default-margins">
            <a class="rd-logo rd-col-1-4">
                <span class="image-helper"></span>
                <img class="rd-logo-image" src="img/layout/logo.svg" />
            </a>
            <a class="rd-logo rd-col-1-4">
                <span class="image-helper"></span>
                <img class="rd-logo-image" src="img/layout/logo-color.svg" />
            </a>
            <a class="rd-logo rd-col-1-4">
                <span class="image-helper"></span>
                <img class="rd-logo-image" src="img/layout/logo.svg" />
            </a>
            <a class="rd-logo rd-col-1-4">
                <span class="image-helper"></span>
                <img class="rd-logo-image" src="img/layout/logo.svg" />
            </a>
        </div>
    </div>
</section>

Evenementen

/sass/components/_evenementen.scss

The events module consists of a section header which contains the section title and a read more link, and several articles displayed as events.

Evenementen

Kalender
Woensdag 4 mei, 18 u – 20 u

De VUB komt naar je toe: International Master Congress Amsterdam

Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.

Woensdag 4 mei, 18 u – 20 u

De VUB komt naar je toe: International Master Congress Amsterdam

Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.

Woensdag 4 mei, 18 u – 20 u

De VUB komt naar je toe: International Master Congress Amsterdam

Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.

Woensdag 4 mei, 18 u – 20 u

De VUB komt naar je toe: International Master Congress Amsterdam

Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.

<section class="rd-events">
    <div class="rd-container">
        <div class="rd-section-header">
            <h2>Evenementen</h2>
            <a href="#" class="rd-section-more">Kalender<span></span></a>
        </div>
        <div class="rd-section-content rd-has-default-margins">
            <a href="#" class="rd-article rd-col-1-2">
                <div class="rd-article-thumb">
                    <img src="img/layout/default-square-thumb.jpg" />
                </div>
                <div class="rd-article-header">
                    <h5>Woensdag 4 mei, 18 u – 20 u</h5>
                    <h4>De VUB komt naar je toe: International Master Congress Amsterdam</h4>
                </div>
                <p>
                    Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.
                </p>
            </a>
            <a href="#" class="rd-article rd-col-1-2">
                <div class="rd-article-thumb">
                    <img src="img/layout/default-square-thumb.jpg" />
                </div>
                <div class="rd-article-header">
                    <h5>Woensdag 4 mei, 18 u – 20 u</h5>
                    <h4>De VUB komt naar je toe: International Master Congress Amsterdam</h4>
                </div>
                <p>
                    Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.
                </p>
            </a>
            <a href="#" class="rd-article rd-col-1-2">
                <div class="rd-article-thumb">
                    <img src="img/layout/default-square-thumb.jpg" />
                </div>
                <div class="rd-article-header">
                    <h5>Woensdag 4 mei, 18 u – 20 u</h5>
                    <h4>De VUB komt naar je toe: International Master Congress Amsterdam</h4>
                </div>
                <p>
                    Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.
                </p>
            </a>
            <a href="#" class="rd-article rd-col-1-2">
                <div class="rd-article-thumb">
                    <img src="img/layout/default-square-thumb.jpg" />
                </div>
                <div class="rd-article-header">
                    <h5>Woensdag 4 mei, 18 u – 20 u</h5>
                    <h4>De VUB komt naar je toe: International Master Congress Amsterdam</h4>
                </div>
                <p>
                    Bezoek ons op het International Master Congress in Amsterdam en kom alles te weten over de moge-lijkheden om verder te studeren aan de VUB.
                </p>
            </a>
        </div>
    </div>
</section>

Contact section

/sass/components/_contact.scss

The contact section sits at the bottom of the page and holds the all the contact information of a certain faculty.

Faculteit Recht & Criminologie
Gebouw C - 4de verdieping
Lokaal 4.C.301
Pleinlaan 2
1050 Brussel
Faculteit Recht & Criminologie
Gebouw C - 4de verdieping
Lokaal 4.C.301
Pleinlaan 2
1050 Brussel

Toekomstige Student

info@vub.ac.be

Toekomstige Student

info@vub.ac.be

Toekomstige Student

info@vub.ac.be

<section class="rd-contact">
    <div class="rd-container rd-has-default-margins">
        <div class="rd-col-2-3">
            <div class="rd-cols">
                <img class="rd-col-1-3" src="img/layout/default-thumb.jpg" />
                <div class="rd-col-2-3">
                    <h5>Faculteit Recht & Criminologie</h5> Gebouw C - 4de verdieping
                    <br/> Lokaal 4.C.301
                    <br/> Pleinlaan 2
                    <br/> 1050 Brussel
                </div>
            </div>
            <div class="rd-cols">
                <img class="rd-col-1-3" src="img/layout/default-thumb.jpg" />
                <div class="rd-col-2-3">
                    <h5>Faculteit Recht & Criminologie</h5> Gebouw C - 4de verdieping
                    <br/> Lokaal 4.C.301
                    <br/> Pleinlaan 2
                    <br/> 1050 Brussel
                </div>
            </div>
        </div>
        <div class="rd-col-1-3">
            <h4>Toekomstige Student</h4>
            <p>
                <a href="#">info@vub.ac.be</a>
            </p>
            <h4>Toekomstige Student</h4>
            <p>
                <a href="#">info@vub.ac.be</a>
            </p>
            <h4>Toekomstige Student</h4>
            <p>
                <a href="#">info@vub.ac.be</a>
            </p>
        </div>
    </div>
</section>

Testimonials

/sass/components/_testimonials.scss

This section holds up to 4 testimonials and makes them toggle-able.

Studenten aan het woord

Arlene
1e bachelor
Arlene
1e bachelor
Arlene
1e bachelor

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<section class="rd-content">
    <div class="rd-container">
        <div class="rd-content-holder">
            <h2>Studenten aan het woord</h2>
            <div class="rd-testimonials">
                <div class="rd-testimonials-header">
                    <a href="#" class="rd-js-show-testimonial rd-is-active" data-ref="testimonial-1">
                        <div class="rd-headshot">
                            <img src="img/layout/default-square-thumb.jpg" />
                        </div>
                        <h5>Arlene</h5>
                        <h6>1<sup>e</sup> bachelor</h6>
                    </a>
                    <a href="#" class="rd-headshot rd-js-show-testimonial" data-ref="testimonial-2">
                        <div class="rd-headshot">
                            <img src="img/layout/default-square-thumb.jpg" />
                        </div>
                        <h5>Arlene</h5>
                        <h6>1<sup>e</sup> bachelor</h6>
                    </a>
                    <a href="#" class="rd-headshot rd-js-show-testimonial" data-ref="testimonial-3">
                        <div class="rd-headshot">
                            <img src="img/layout/default-square-thumb.jpg" />
                        </div>
                        <h5>Arlene</h5>
                        <h6>1<sup>e</sup> bachelor</h6>
                    </a>
                </div>
                <div class="rd-testimonials-content">
                    <div class="rd-testimonial rd-is-visible" id="testimonial-1">
                        <p>
                            Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </p>
                    </div>
                    <div class="rd-testimonial" id="testimonial-2">
                        <p>
                            Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </p>
                        <p>
                            Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </p>
                        <p>
                            Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </p>
                    </div>
                    <div class="rd-testimonial" id="testimonial-3">
                        <p>
                            Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Team Module

/sass/components/_team.scss

This section contains a unlimited amount of team members, splits them in sets of 7 and adds a pagination.

Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
Mathieu Vinken
Prof. Dr. Pharm

Vrije Universiteit Brussel

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Read more
<section class="rd-content rd-intro rd-extra-left">
    <div class="rd-container">

        <div class="rd-content-extra rd-team">
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-member">
                <div class="rd-member-top">
                    <div class="rd-headshot">
                        <img src="img/layout/default-square-thumb.jpg" />
                    </div>
                    <h5>Mathieu Vinken</h5>
                    <h6>Prof. Dr. Pharm</h6>
                    <p>
                        Vrije Universiteit Brussel
                    </p>
                    <a href="#" class="icon-arrow-down js-open-member"></a>
                </div>
                <div class="rd-member-intro">
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                    </p>
                    <a href="#" class="rd-read-more"><span>Read more</span><span class="icon-arrow-right"></span></a>
                </div>
            </div>
            <div class="rd-team-pagination">
                <a href="#" class="icon-arrow-up previous js-pagination-previous inactive"></a>
                <a href="#" class="icon-arrow-down next js-pagination-next"></a>
                <div class="rd-dots"></div>
            </div>
        </div>
    </div>
</section>