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.
Update implementation to use the latest version of uol-cookie-control.js and latest CSS that can be found in the Assets zip.
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.
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 to a 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
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 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.