Ref: DS-83931 Updated the university logo across all pages in the header, footer and favicons. Updates css to accommodate the change in logo size. New logos can be found in the /assets folder.
Ref: DS-69862
There was an issue spotted with incorrect right hand spacing on the global navigation component.
Ref: DS-77992
There was an issue spotted with the search results page, where at '1023px' view the 'Filter by' button would disapear.
Ref: DS-80107
Update to component to make accessible, change to homepage template to allow the use of the hero banner in homepage examples.
Ref: DS-59989
Made visible favicon code in the design system with notes Added a new line of code for the favicon which is working in google search for the design system. See HTML / Notes tab
Ref: DS-66085, DS-78393
For online courses - Hard coded HTML example with widget container to match implementation team
Ref: DS-64937
For online courses - Hard coded HTML example with widget container to match implementation team
Ref: DS-57152
For Campaign landing page, if config 'type': 'stacked' then a class is added that changes the css so the intext fact items are now stacked.
Ref: DS-72398
Updates to the feature image component when displayed within an article. The featured image will be displayed bigger on news and events variants. Some CKeditor components were overspilling the container so these have been brought back inside.
Ref: DS-66085
New CKeditor Component, designed for the Campaign Landing Page (Online Courses).
Component variants can be found here:
Ref: DS-72407
There were a couple of issues reported around spacing on the accordion.
Fixes can be seen here:
Ref: DS-71287
Update to this component to allow for different heading or paragraph tags to be used. This is to improve accessibility and flexibility of how the component can be used (includes updated documentation on how to use).
Examples of the component using different tags:
Ref: DS-57152
Update to this component to allow for different heading tags to be used, to improve accessibility. Documentation has been updated to provide guidance on how to use this.
Examples of the component using different tags:
Ref: DS-72051
Throughout the design system there are a range of different but similar results components. These have now been consolidated in to one single component called 'results'. This component and its associated variants accommodates all different styles and requirements of previously used results components.
Previous components are still in the design system as implemented sites may still use them. Going forward implemented sites to use this new component and where possible convert any old to new.
Page examples of the new component to be added to this changelog.
Ref: DS-66349
A number of small changes and improvements to the homepage layout, including:
Fixes to alignment of footer items
Spacing updates for widgets and Facts and Figures
Typography style updates for Widgets, Related Content and side navigation CTA's
Ref: DS-78416
Fix for Index Tables for when image is present.
uol-spacing class added to below njk templates.
This class utilises spacing rules between elements (headings, paragraphs, components etc) in main content areas.
Implementation teams to add this class to corresponding templates.
article-content.njk container.njk full-width-content.njk document-page.njk campaign-landing-page.njk conformation-page-widgets.njk
One key page where these spacing rules are applied is our article CK editor page:
Patch to 1.0.14 version removing Language exchange pages due to search engines finding example pages causing end user confusion.
Patch to 1.0.14 version including:
Previously the section navigation overlapped with the lead sentence red line (this wasn't noticed before as examples didn't have long text in the section navigation). Added a variant which demonstrates the longer text no longer clashing with the red line.
The related courses on the below example weren't working correctly. This was due to config data in this example not being automatically updated. This won't affected any implemented sites as they use the updated component.
Patch to 1.0.14 version including:
There should be no noticeable change within the Design System for this change but the following example page should work without any errors, and console logs when using the typeahead component are now removed.
Ref: DS-61492
Njk: new; CSS: N/A; JS: Config only
New example product page for Online Courses, Blog Search Results. This features existing search page components and the updated search results item (detailed below).
Ref: DS-46233
Njk: N/A; CSS: updated; JS: config only
Changes to the css to ensure touch targets are large enough and accessible.
Also embedded into the CKeditor
Ref: DS-45994
Njk: updated; CSS: updated; JS: Config only
Update to search results items component to improve layout and add additional variants that better demonstrate configuration options. Please see below for variant details.
List of key variants:
Ref: DS-45989
Njk: New; CSS: updated; JS: Config only
In text icons, new way of showing icon text pairs for within article or document patterns.
Test URLs:
Ref: DS-45988
Njk: New; CSS: updated; JS: Config only
Similar but not same as banner component, this banner allows for one visual "hero" banner with an image, title and optional lead sentence, and no call to action.
Above link shows default banner. Following link shows banner with lead sentence.
Ref: DS-49470
This variant presents two drop down lists before a search box and button.
Njk: Updated; CSS: updated; JS: Config only
This pattern appears as a form component variant and a form widget
Ref: DS-56582
Update twitter icon, added threads and tiktok icons
Njk: Two new added; CSS: N/A; JS: Config only
Each of the above updated on following pages (in footer):
Njk: N/A; CSS: N/A; JS: Config only. Documentation added.
To exhibit how active page header item needs to be set to show active page, a new variant has been added together with supporting documentation. Support guidance updated accordingly.
@uol-header-local-navigation--highlight-active-page
Ref: DS-61963 and DS-46397
Njk: N/A; CSS: N/A; JS: Config only
Further additions to Article example pages
Njk: updated
Bugfix for landmark accessibility, swapped out 'div' for semantic 'aside' tag.
This release does have updates that were made as part of the accessibility project but due to it stopping these elements are untested. So please don't change the njk files of these ones.
Njk: updated; CSS: N/A; JS: N/A
Update to fix issue with duplicate dates on screen readers.
Njk: N/A; CSS: N/A; JS: updated
Due to issues with the clearing webpage not displaying information in accordions correctly we put a hotfix into 1.0.9, we have now added this to 1.0.10, 1.0.11, 1.0.12 and 1.0.13.
Release 1.0.13 is split in to three constituent parts.
"Skip links" is top level template work (HTML modifications) which will affect most if not all pages. We thought best to address this first, as all other branches use this modified structure.
Njk: updated; CSS: N/A; JS: N/A
In order to make sure the skip links goes to non repeating content, several components and changes have needed to modified. The following list are all modifications to existing components/patterns.
Although components have been listed below the 'skip link' functionality would need to be tested within a page, please see some examples below (Affected pages section).
uol-section-nav-ctas | uol-section-nav-related-content | uol-article | uol-homepage-content | uol-pattern-search-results | uol-template-course | uol-template-homepage | uol-template-page | uol-template-search | uol-example-article
Affected pages:
Please note, within 'Patterns / Search results' section there are a number of patterns which are still in development (to be completed in future sprints). These include: 'With Content Area', 'Without Search Form and With Content Area', 'With Map' and 'With Map And Content Area'.
Homepage / Default | Homepage / Section Navigation With Ctas And Related Content | Article / Default | Article / Ckeditor Pattern (see below) | Document / Default | Document / With Side Navigation | Search / Search Results / Default | Search / Search Results / Publications | Products / Coursefinder / Pages / Undergraduate One Page | News And Events / News
Njk: updated; CSS: updated; JS: N/A
New video variant added to the cards which can be applied to any card by passing 'video': true in the config.
New variant with four cards added.
CSS: updated; JS: Module JS and config change
Fix to overlapping email addresses in related content panel.
Page link: Section nav with long email address example
Njk: new template; CSS: updated; JS: Config only
New component used to display information about a users publications. Four variants showing several examples.
Njk: new template; CSS: updated; JS: Config only
Component to house a number of Publication List components. Below example inserts this component into accordions at bottom of profile page.
Additional useful links: Article profile example
Njk: updated; CSS: updated; JS: Config only
Search example page variant updated to include variant with instances of publications-list component in results
Njk: updated; CSS: updated; JS: N/A
Further work to update the article pattern with spacing improvements around how the Profile Supplement sits on the page.
Also News and events have been implemented at the bottom of an example News and Events article pages.
These can be seen in the 'Examples', in the 'Article' section called 'Article: with News Supplement' and 'Article: with Events Supplement'.
Example pages:
Njk: updated; CSS: updated; JS: N/A
New navigation cards component. The navigation card is a component that displays text but also acts as a large clickable link to another area. Variants include different numbers of cards, but also a variant which exhibits how the cards handle text limits. Text limits described in documentation notes, and on the cards themselves in the 'Different text limits' variant. Long descriptions where the description is more than six visual lines are terminated via an ellipsis.
Variants and example page
Njk: updated; CSS: updated; JS: N/A
New image pair component. Variants include default, one image (un-advised but if only one image included image fits to width of container) and variant with no caption. Also embedded in to CK editor (all possible content) example.
Variants and example page
Njk: N/A; CSS: updated; JS: N/A
Gallery modal bugfix. Zooming in browser window to 400% meant navigation controls were going off screen. Bug fix applied to ensure this is no longer the case.
Additional useful link Document page with gallery example
Njk: N/A; CSS: N/A; JS: N/A
Design system documentation change only. Documentation update to highlight linkage between form inputs and corresponding label for accessibility compliance.
Njk: updated; CSS: updated; JS: N/A
Added form pattern variant 'Search with single typeahead'. This uses our standard single typeahead component in a form (previous versions utilised simple text entry inputs). Note, as per previous implementations for the typeahead component, for un supported browsers (Firefox, IOS, Android) the default select component is used, hence typeahead functionality is not available on those platforms. CSS modified to accommodate for both of these.
Njk: updated; CSS: updated; JS: Config only
Allow the ability to add a map at the top of the search results pattern
Njk: updated; CSS: updated; JS: Config only
An example page to bring together the building and room page.
Njk: new template; CSS: updated; JS: Config only
This example shows the Academic life page this will link to the contacts page.
Must be used at the bottom of the page above the footer pattern and can pass any material design icon that is present in the uol-icon component
Njk: updated; CSS: updated; JS: updated
Based on existing people profile card component (@uol-people-profile-card), this component offers further functionality and modified laytout. Several variants with multiple configuration options available. The below example page shows all possible content which can be included.
Note, design requires different placement of content for different viewpoints. This wasn't efficiently possible in CSS, therefore Javascript utilised to move content around. One example of this is viewing the below variant, note the content from the lead sentence downwards shifts position at 768px breakpoint, and person position (red title) switches position at 600px viewpoint. With Javascript disabled, this content always stays underneath the image and title.
Additional useful link: Multilink results item all
Njk: updated; CSS: updated; JS: N/A
(Note component same as previous component, just with plural)
Similar to the people profile card component, this component holds a number of results items.
Njk: updated; CSS: updated; JS: N/A
New variant added which accommodates a number of radio buttons on a form above the search input.
Njk: updated; CSS: updated; JS: updated
A further form fields input variant. This variant uses our typeahead mutliselect, but doesn't show chips. Instead it shows the number of options selected. For one option this shows "1 option selected" (single option). For two or more options this shows "n option selected". For zero options this information field does not show.
The link below is for the stand alone component. The link below includes this behaviour in the 'Cheeses list' filter option.
Additional useful link: Search results item - multiselect without chips
Njk: updated; CSS: updated; JS: updated
Dynamic filter name options. Work added to make filter panel title reflect the type of filters within.
Combinations detail and links as follows:
Additionally, added the folowing variants for with map, with new content area and without form (and a few combinations of these):
CSS: updated; JS: Config only
The CK editor page pattern is a new article example. This page aims to in corporate anything which editors can in principle add to an article page. In page user documentation is provided. Most elements on this page have been tested on previous article patterns. New additions specific to this release version are:
Publication date: 17 April 2023
Changes to article patterns styling, default article example content and creation of new example page (examples/article/ck-editor-pattern) which includes documentation and all components which can be used on an article page.
Fix to overlapping when browser text size is set to large or very large
Work on updating designs for article patterns.
Changes to the article patterns (above) incorporated in to full page examples. Specific to this build article profile pattern.
The above components have been updated as part of the 'Featured content widget' work.
This includes two new variants one 'With Arrow Links', which allows for a series of arrow links to be passed to the 'Featured content component' through the config.
The other variant is the 'With video', this allows for a video to be added (passed through the config). This uses the gallery component.
The gallery component has had a small update to allow for a new style play button icon to be added to a video.
The news tiles have been updated, primarily to move the title down to the bottom of the tile and update some spacing.
Removed reference to partial support for IE11 from DS home page
Minor modification to banner component. Previously screen readers read the previous and next controls as "previous" and "next". These have now been replaced to say "Select previous banner item" and "Select next banner item".
Work on updating designs for article patterns.
Addition of new component (article highlight) in to template. and template modified for different markup for different article types.
Changes to the article patterns (above) incorporated in to full page examples.
New component added. This new component is embedded in to the article blog pattern and example referred to above.
Variant to rich text table added to accommodate optional HTML caption tag. As well as the uol-rich-text-table component, table with caption is added to the article news pattern and example.
Updated to make 'lining-nums' global.
To show chips placeholder in DS.
Tidy up Javascript and make implementation of single page navigation more robust.
Change text of clear filters button and 'Filters' title for if single or plural.
To allow for a highlighted piece of text (red) to be passed through to a results item. Also allow for a custom piece of data to be added, where the title and the content can be defined.
'Safe' added to the content section in related links to stop the data from being escaped.
Removed 'Skip to content' work, this is just temporary and will be added back in a future release (likely the next). It was removed due conflicting with an exsisting bit of code.
A new template created for Postgraduate Research Opportunities. Includes the following variants:
New template created for Postgraduate Research Opportunities home.
New template created for Postgraduate Research Opportunities search results.
Replaced multipage course details variants with single pattern. All content on the same page and JS enabled to show and hide content.
Updated the course template to accommodate articles, rankings and awards, page-nav and profiles on one page.
Component for the filters panel to be used as part of the search results. Only to be used on mobile and tablet view after the filters result button is clicked.
Pattern bringing together the components for the search results. Including the @uol-filters-panel, @uol-form-block, @uol-results-count, @uol-results-items and @uol-pagination
A template to be used for search results pages.
An example page for course search results, using the @uol-pattern-search-results and @uol-template-search
Pagination updated to not use Javascript to add the SVG icons to resolve issue CMS side.
A form component which is used as a container for putting together a form block. Can include images, lead text, rich text e.t.c
Similar to the uol-button component, this component allows a link (href) to be applied to a button. This button should be used sparingly, other options may be more applicable to linking to other pages. Styling has been applied for button combinations on pages such as coursefinder apply pages and icon support for buttons used on search filter pages.
This component is used to highlight 3rd party logos within content areas.
Fixed an issue with the accordion, when large tables were added this could result in some of the content being cut off for the user.
A change in the alignment of the results item
Allow config specific to course search such as UCAS code, duration and a-level offer
The Course finder pages template for masters. A number of different variants have been included:
The Course finder pages template for online. A number of different variants have been included:
The Course finder pages template for undergraduate. A number of different variants have been included:
A variation on uol-section-nav to be used on course finder pages. The section-nav goes in to an accordion on small screen sizes, this component shows options at all times as integral for page navigation.
An Example page for the homepage for course search, featuring existing search form and new 4 cards wide variant
A variant of the cards widget, displaying 4 cards on the same row on widescreen view
This component is used to display a list of key facts. This block of facts communicates important facts for example about a course.
Blocks showing facts and figures on a page. One or two can be displayed but no more than two. These facts have an optional link URL.
The global marketing banner provides a means of communicating primary marketing messages e.g information on open days.
The profile supplement content type is used for displaying current or former students or staff’s accounts of their experiences at the University.
The Year of Entry is to be displayed at the top of each course page. It includes an optional link which can take the user from the course page of the current academic year to the course page of the following year or vice versa.
Update to in text cta to make the component more prominent, ensuring calls to action stand out better.
CSS change to address blockquote accent (“) clipping.
Update to latest CSS version
Updated version of the uol-cookie-control.js plugin that addresses Safari bug that caused the updated policy notification to fail.
Updated a number of templates and components to improve accessibility when using the 'Skip to main content' links (ensuring the user is taken to the main content of the page).
To implement this improvement, the following templates and components will need to be updated.
Updated the banner template to support lazy loading of images for improved load times.
Add loading="lazy" attribute to the img tag
"Chips" component to display selected items in new @uol-form-input–multiselect–typeahead component (see below)
Added support for:
Update @uol-form-input template and include latest Design System JavaScript and CSS. For usage see component notes.
Fixed placeholder text opacity for Firefox and partial opacity was causing colour contrast failure
Update to latest Design System CSS and JavaScript
Updated the Cookie Control plugin to address accessibility issues caused the previously fixed footer notification overlapping content. The cookie notifications now appear as inline elements at the top of the body.
Footer updated to support Accreditation Logos using the pre-existing component @uol-accreditation-logos.
Update @uol-site-footer to include
+ {% if accreditations %}
+
+ {% endif %}
The Design System now includes component specific guidance for authors and developers on the types, sizes and compression levels for images. If a component includes image guidance you can now find this under the Notes tab.
Update implementation to use the latest version of uol-cookie-control.js and latest CSS that can be found in the Assets zip.
Button component now configurable, removing the need to hard-code attributes.
Update all instances of @uol-button to use new configurable version and config data.
Form component updated to use updated configurable @uol-button
Added support for Actions and Messages. Actions are used to make a profile "interactive" and make use of the updated @uol-button component to render a button. Messages are displayed using the nuw @uol-status-message component.
Status messages are used as within the @uol-people-profile-card to display post-interaction messages.
Now includes "sortBy" option. This allows more appropriate sorting e.g.
Improvements to button focus styling
Support added for subsite header navigation
Update template for @uol-header-local-masthead
Result card for people profiles. Used within the new @uol-people-profile-cards component
List view for @uol-people-profile-card
Paginated search results for people profiles. Uses @uol-people-profile-cards
New component to display accreditation logos.
Extends standard @uol-widget to display accreditation logos using @uol-accreditation-logos
Updated to support accreditation logos
Updated to address bug whereby a featured card layout could be rendered without the required image markup
Updated to address bug with required radio button inputs
New variant supporting date and date range pickers
Update template for @uol-form-input
New input type of type="file" provides an enhanced file upload experience for users of modern browsers with a basic fallback for Internet Explorer 11.
Update template for @uol-form-input
Gallery component to display images and videos with accompanying text.
Widget to display galleries within widgets on home and landing pages.
Utility component to illustrate the linkArrow JavaScript module. The linkArrow module adds animated arrows to the end of links.
New description list component for use within @uol-widget-description-list.
New 'homepage' widget to present "Description lists". Uses @uol-description-list.
Removed global search to new separate component @uol-header-global-search
New separate component for global search to be included in @uol-header-global-masthead
New header component to support sites other than the main corporate site eg. faculties, wordpress etc.
New list component for use within @uol-widget-list-featured
New 'homepage' widget to present featured lists. Uses @uol-list-featured
Updated the site template to remove auto linking of "telephone numbers" as it was causing dates to be converted to phone links in some browsers.
Add the following line to the head:
<meta name="format-detection" content="telephone=no">
src/library/02-components/form/form.njk
src/library/02-components/form-fields/input-container/input-container.njk
src/library/02-components/form-fields/input/input.njk
src/library/02-components/form-fields/error-msg/error-msg.njk
Provides a count mechanism for character count limited text areas. See updated @uol-form-input for implementation.
Updated to use new @uol-form-pattern
Updated to use new @uol-form-pattern
Updated to use new @uol-form-pattern
New component to display events for the new @uol-widget-events pattern
Extension of the @uol-widget component to present upcoming events on a homepage or landing page.
container now has addition attributes to better support "Skip links" for IE11
Updated to improve results count checking and handle zero results within the component rather that in parent patterns (see @uol-staff-a-z update below).
Zero results now handled by updated @uol-results-count (see above)
Now uses standard uol-rich-text container to control styling on additional form text.
Updated markup to remove semantics.
Update any instances of the pull-quotes in content and update any editor authoring tools (eg: CKEditor, TinyMCE) that make use of @uol-typography-pull-quote markup.
Moved @uol-in-page and concatenated the title and sub-heading to improve SEO and search results.
Provides additional navigation for multi-page documents, blog posts, news items etc.
Updated remaining SVGs to include focusable="false" aria-hidden="true"
While most of the SVGs are included in the assets either as files or within JavaScript and can be updated by using the latest assets, you will need to update the following components:
Replace outer div with section with aria-label="Featured" to provide better page landmarks.
Added aria-current attribute support to current page in section navigation.
Update template to include {% if item.current %}aria-current="page"{% endif %} on anchors.
Ensure the section navigation data includes an item with 'current': true where appropriate.
Added aria-current attribute support to current page in footer navigation.
Update template to include {% if link.current %}aria-current="page"{% endif %} on anchors.
Ensure the footer navigation data includes an item with 'current': true where appropriate.
Added aria-current attribute support to current page in navigation.
Update template to include {% if item.current %}aria-current="page"{% endif %} on anchors.
Ensure the navigation data includes an item with 'current': true where appropriate.
Accessibility improvements and bug fixes. Update to latest assets to apply improvements and fixes.
Improve navigation dropdown contrast against dark backgrounds
Fixed conflict between aside tag and presentation role. Now uses non-semantic div with aria-hidden="true"
Update any hardcoded or database instances on the pull quote. If you have implemented any WYSIWYG plugins you will also need to update the markup these deliver.
Section nav loses focus on keyboard parent item interaction.
No template changes. Update to latest assets to apply fixes.
Cookie controls using the uol-cookie-control JavaScript plugin. The component provides example implementations and basic site specific CSS.
New component to render "Call to action" blocks. Can used within a standard rich text area or within the new @uol-widget-ctas widget (see below).
NB: Ensure you set the correct heading level appropriate to the context.
New widget pattern to render one or more @uol-in-text-cta instances.
The widget head container .uol-widget__head now only renders if widget_title, widget_lead or widget_link are true. While we still recommend that most widgets should have mandatory titles, the @uol-widget-ctas pattern did not require the title.
NB: if you use @uol-widget-ctas without a title ensure you set the correct heading level appropriate to the context.
New widget pattern to render a rich text area.
Updates to the home page content to support the new and updated widgets in this release.
In order to maintain the correct heading structure for the homepages the widgets output is now preceded by a visually hidden H1 tag.
NB: Ensure you pass an appropriate page_title string to each homepage.
Added option for card group to force image layout with placeholder where images aren't present using boolean 'image_layout': true,. If not set the no-image layout will be use even if images are available for individual cards.
Added time information to support News and Events widget (see below).
NB: If your date string is not a standard date format you should replace the time tag with a span of the same class making sure you do not include the datetime attribute.
New widget pattern to support the display of news and events cards.
Pattern for news and events index and search results pages
Results count or news and events search results pages.
Card style component for news and events on news and events index and search results pages.
Pagination output is now conditional on there being more that one page. Removed invalid type="button" attribute from anchors.
Component to output between 1-6 "Facts and Figures" blocks.
New widget pattern to display @uol-facts-figures component in a homepage context.
This component provides a visually hidden 'skip link' to the header of every full page on the site that can be accessed by keyboard and screen reader users.
Global masthead updated to include the new @uol-skip-link component.
Replacing input wrapper div with span to ensure valid HTML.
Added support for additional content to be appended after the search form.
Added support for index tables in accordions
Cards display
@uol-cards extension of the @uol-widget
Languages not supported by our default Freight implementation will render using the default system font
Added aria-label="Site navigation" to nav
Added aria-label="Section navigation" to nav
New component to support section based related content
New placeholder component to support JavaScript relocated content while maintaining semantics and landmarks
Now includes @uol-side-nav-container
Now includes @uol-section-nav-related-content
Changed 'span' to a 'strong' tag around the organisation name to improve semantics.
Fix error in fill hex value
The main site template has been updated to accommodate the full width header and footer.
Contact the frontend team for a copy of the updated template.
Provides navigation between pages of results. Used in Staff A-Z - see below.
Provides a banner for use on homepages with a slider when more than one banner item is present
Section navigation. NB. the location of the section navigation in the dom will be changed using JavaScript depending on viewport and page content.
Local navigation has been updated to accommodate the new @uol-section-nav
The Global Masthead has been updated to accommodate the new @uol-section-nav
Minor markup update to accommodate the new @uol-section-nav
Footer markup updated to support full width footer
Includes new variants for each article type with section navigation where needed.
Do not implement Initial homepage content mock-up for testing purposes.
Do not implement Initial homepage mock-up for testing purposes.
Updated SVG social media icons for improved IE11 support:
Updated SVG logo for improved IE11 support
New Section CTAs component
Additional variable for Type to support full range of options:
Outer wrapper for form fields
Standard form input initially supporting types:
additional types support will follow.
Search form for use with Staff A-Z
Presentational component for use on Staff A-Z
Added support for search results count for use on Staff A-Z
Pattern for Staff A-Z search and results
Minor update to Article example to add support for Section CTAs
Minor changes to template and more substantial changes to the CSS.
Update any instances of @uol-tiles and @uol-widget-tiles and included updated CSS and JS
Tables for use on index pages
Quicklinks sub-component for @uol-header. Provided University links for inclusion in the global header section.
Provides a standard button component. Includes support icon buttons and icon-only buttons using Material Design Icons
Updated Typography to improve relative type sizes
Provides breadcrumb style navigation for use on sub pages
Provides the top level local navigation with support for one level of sub menu.
Updated to include the new @uol-header-local-navigation component and and outer container.
Update any instances of @uol-header to reflect the new view.
Initial masthead work includes the @uol-header as a container for @uol-header-global. @uol-header-global currently contains the University of Leeds logo and the global search form.
The Design System now includes a linked zip file containing the assets needed for implementation. You will find the link on the home page
The browser feature detection script Modernizr has been refactored to incorporate it into the start and build processes. This will allow for easier updates and configuration changes in future.
Update to latest version of /assets/scripts/modernizr-custom.js
Update to article pattern to provide support for Person Insight variant.
Rich text tables support. Includes horizontal scrolling for wide tables and cell stacking for small screens.
Updated pattern for articles. Additional support for profiles
Reworked version of the 0.1.x accordions. This version drops the outer grouping for multiple accordions and allows the heading tag to be configured.
Required for the @uol-article profile variant
Required for the @uol-article profile variant. Somewhat duplicates the @uol-article-content component so these two items may be combined in a future release.
Additional variants. No change to template, CSS or JS
New pattern for articles. Currently supports types of Default, News and Event.
This is a wrapper component for our standard home and landing page widgets. The new @uol-widget component replaces the version previously available in 0.1 and looks significantly different. While much of the markup remains the same, there have been small changes taht will require implementation.
This component extends the new @uol-widget (described above) to provide a "tiled" interface for highlighted content on home and landing pages.
This component extends the new @uol-widget (described above) to provide a "tiled" interface for high profile news on home and landing pages.
0.2.1 provides the first proper components of the 0.2.x version. This releases focuses on the site footer and it's dependencies.
A new componentised footer intended to meet the needs of Corporate, Faculty and all other UoL branded sites.
Includes the following foundation elements
0.2.0 marks a significant refactor to incorporate new foundational elements. All previous components have been removed/hidden. Future iterations will reintroduce the previous components with new foundations. This first 0.2.x iteration includes
As these aspects are not components but rather global values they are represented in the documentation section.
The @uol-gallery component and @uol-widget-gallery pattern are included in this release. They provides gallery layouts for collections of images or videos. Image galleries may be displayed with or without a modal view. For image galleries the modal can be used to display larger, un-cropped versions of the images along with additional information. Video galleries display an image placeholder for the video (image sourced via YouTube URL based on ID), the video player is only loaded when the modal is opened.
See Components -> Gallery for the data model and markup.
The @uol-card component is updated to support a wider range of content types including specifics for Events. The visual design has also been updated. To simplify widget implementation the functionality of @uol-widget-news-events and @uol-widget-news has been incorporated into @uol-widget-cards.
Update any implementations of @uol-card and @uol-widget-cards to match new markup.
The parrern @uol-widget-events has been removed and the functionality incorporated into @uol-widget-cards
Remove any implementations of @uol-widget-events and use @uol-widget-cards in its place
The unimplemented prototype @uol-widget-news-events has been removed and the expected functionality incorporated into @uol-widget-cards
The unimplemented prototype @uol-widget-news has been removed and the expected functionality incorporated into @uol-widget-cards
The unimplemented prototype @uol-widget-blog has been removed and the expected functionality incorporated into @uol-widget-cards
The @uol-search-results-news pattern provides the standard news index page layout. At present it requires a bespoke search form @uol-form-search-news. We plan to remove this in future once the standard search from has been upgraded to support the requirements of news.
Results item markup has been updated to use an H2 instead of the previous H1 tag. This should improve document structure for screen reader users.
Update any implementations of @uol-search-results-item to match new markup.
The @uol-gallery component and @uol-widget-gallery pattern are included in this release. They provides gallery layouts for collections of images or videos. Image galleries may be displayed with or without a modal view. For image galleries the modal can be used to display larger, un-cropped versions of the images along with additional information. Video galleries display an image placeholder for the video (image sourced via YouTube URL based on ID), the video player is only loaded when the modal is opened.
NB: There are a number of outstanding accessibility bugs which should be addressed in release 0.1.5. The bug-fixes are unlikely to require any change to implementation markup. The fixes will most likely be delivered via updated JavaScript and CSS.
Fix bugs with inconsistent table sorting arrows
Update to latest JS and CSS
Aria label added to breadcrumb component to improve accessibility.
Update any implementations of @uol-breadcrumb to match new markup.
Provides a standard structure for data tables. The component provides
This component is suitable for use on index pages to display data from a search or category selection. It can also be used in content areas where there is proper template control is in place.
At present the component only provides support for tables with column scoped table headings 'th' within the thead of the table. Sorting and "table stacking" will not work where a table heading has row scope or where mult-level th are used in the thead.
We are now using a new set of colours. There are no implementation actions required other that including the latest CSS and JS. You will however see mostly minor changes to the colours used in components.
New markup for @uol-breadcrumb.
Update any implementations of @uol-breadcrumb to match new markup.
Implementation of feature 11422 - Information announcement.
Provides an announcements component to allow site visitors to see updates on important information.
Requires addition of the @uol-announcement component immediatly after the 'body' tag in the site outer template
{% render '@uol-announcement' %}
In addition the remaining site content should be wrapped in a div with the class of "site-outer"
Implementation of feature 9197 - Facts and figures widget.
Provides a way to present key facts and figures. Includes @uol-widget-facts-figures for use on landing pages.
Implementation of feature 12126 - Content accordions
Provides a method of hiding and showing content via a heading toggle button.
Initial release provides components necessary for the Wellbeing Safety & Health website.