This document is a summary of the visual changes we will introduce with Styleguide Release 1.2.
Note:
Most of the changes were made in the code, making use of bootstrap new classes and reworking the HTML.
In term of styling we chose to align the interactive elements to be more consistent in term of behavior (buttons, links, cards) while changing the styling as little as possible.
We chose to focus on optimising the components and we didn’t optimise the page example (since they are only example and not downloadable templates). But because the pages are made of components, changes have been cascaded to them as well, and the pages are automatically updated.
Animations
Spinner: updated spinner, rotate in a smoother way and looks better.
Banner: no change
Blockquote: the name of the source is now smaller and makes the quote stick out.
Button
Primary Button: Hover color doesn’t stay after pressed. This improves consistency regarding button behaviour.
Secondary Button: Hover color doesn’t stay after pressed. More consistent.
Dark Button: Hover color doesn’t stay after pressed. Added a on Press Color. More consistent. More consistent.
Link representation: we aligned all links to follow a generic principle.
Interactivity is now indicated by a change of visual state, according to the following principles:
Calendar
Calendar Cards: visually similar, but since we are using a new class, there are very minor changes in spacing and sizing.
Calendar: changes in HTML, but not visually (except for image who now stretch to the card border).
Event list: no visual changes (but new HTML).
Event Title: no visual changes (but new HTML).
Card
Generic for all Card component: The image within a card stretch to the border of the card (no padding), giving a fresh and clean impression.
Card Default: better spacing for body text and link text. No border on image. New HTML.
Carousel: new attribute data-bs-ride, minor HTML changes. Carousel indicator and arrows are now buttons instead of A tags. No visual changes.
Cookie bar: applied generic rules for link text.
Figure: no visual changes.
Forms
Forms: adjustment in spacing between labels and form field for better readability. Follows Bootstrap 5 standard.
Checkbox: applied Bootstrap 5 styling for a more snappy feeling. Class and HTML changes.
File default: adjustment in spacing between labels and upload button for better readability. Follows Bootstrap 5 standard.
Password default: adjustment in spacing between labels and form field for better readability. Follows Bootstrap 5 standard.
Radio button: minor adjustment for faster state transitions. Follows Bootstrap 5 standard.
Search: adjustment in spacing between labels and form field for better readability. Follows Bootstrap 5 standard.
Select default: adjustment in spacing between labels and form field for better readability, arrow down as icon. Follows Bootstrap 5 standard.
Select: aligned to generic form HTML update (see above).
Textarea: aligned to generic form HTML update (see above).
Search filter: same layout as before, updated checkboxes, radio buttons and arrows.
Header Puff: same layout as before.
Info
Infobox: same layout as before. Changes in class. Applied generic rules for text link.
Magazine: same layout as before. Changes in class. Applied generic rules for text link.
Newsletter: same layout as before. Better spacing between form and button. Changes in class. Applied generic rules for text link.
People: same layout as before. Changes in class. Applied generic rules for text link.
Kicker: same layout as before. Changes in class. Applied generic rules for text link.
Language switch box: same layout as before. Changes in class.
List
Default: same layout as before. Changes in class. Applied generic rules for text link.
List item: same layout as before. Changes in class. Applied generic rules for text link.
All other list components class and HTML changes only, layout as before.
News
News Cards: Aligned on the updated generic card layout (no image border)
New focus item: Aligned on the updated generic card layout (no image border)
Newsletter: Aligned on the updated form layout (better spacing)
News press contact: Stay the same size on screen resize (as opposed to before when they shrunk to a very small size).
Program
Program application: no changes.
Cards follows the generic principles.
Progress
No changes
Table
Default: no visual changes (only class)
Light: no visual changes (only class)
Tag
Tag: no visual changes (only class)
Tag list: no visual changes (only class)
Teaser cards
same as cards and buttons
Breadcrumbs: no visual changes (only class)
Links
Links: no visual changes (only class)
Read more link: no visual changes (only class)
Mobile Navbar: no visual changes but HTML and class changed to button (open a modal).
Mobile Navigation: no visual changes but HTML and class changed to button (open a modal).
Nav list: no visual changes
Nav Pills: no visual changes
Navigation Block
Navigation Block Dark: no visual changes but changes in behaviour when navigating through tabs.
Navigation Block Light: no visual changes.
Pagination: Added color change when tab focussing.
Changed behaviour in mobile, text disappears and is replaced by …
Side navigation all levels: no visual changes.
Tabs
Tabs: no underline, tab focus behavior use arrows for navigating between tabs.
Tabs content: no visual changes.
Tabs content: no visual changes.
Tabs list: no visual changes.
Headers: no visual changes.
Footers: no visual changes.
Masonry: no changes, but some old bugs.
Sticky navbar: removed divider and replaced them with a box when displaying the component on small screen.
No changes
Swipe
No changes
CTA: no border on image for the card component
Swipe Mobile: no border on image for the card component
Toggle
Toggle Accordion: slight visual changes, mostly Class changes and upgraded animation effect (bootstrap).
Toggle Card: slight visual changes, mostly Class changes and upgraded animation effect (bootstrap).
HEADING: no changes
TYPOGRAPHY: no changes
ICON: no changes
Pages are built with components. We have updated the components but we have not adjusted the pages layout.