Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Information Unit

Information units are molecules which consist of groups of related atoms - either standalone icons, text labels or text labels accompanied by supporting icons. A group of sharing icons is an example of an information unit:

Example of sharing icons group

When grouping related atoms into information units, we apply several principles to make grouping consistent across the platform. It is worth mentioning that these are principles, not rules, therefore there may be some occasions when a design decision is made that doesn’t strictly follow the principle.

When elements are stacked vertically and there is more than one element in the unit, we display a horizontal line below each element, including the last one:

= render partial: 'shared/molecules/run_metadata', locals: { run: sample_run }

This version is fully expanded vertically, with text labels. It has a responsive width so it fully fits the width of its container. It appears on the course detail page.

When elements are stacked vertically but there is only one element in the unit (or when there are several from the same family, e.g. sharing icons), we don’t display a horizontal line:

When elements are stacked horizontally, we display a horizontal line above and below the unit:

= component 'courses/course_metadata_inline', { course: CoursePresenter.build_from_run(sample_run), button: { href: "#" } }

This version is inline with a button for further information. The button may include tracking attributes that tie in with our reporting. This version’s responsive pattern breaks down into two lines at smaller resolutions. It appears in the Your courses page, and the related courses organism.

A further example of the vertically stacked information unit:

  • Finished
  • Upcoming
  • TBA
    Date to be announced
= component 'runs/run_dates', { runs: course.runs_to_display_to_user(current_user, run), run: run }

The run_dates component extends the run_metadata component CSS in the expanded form.