Layout components ΒΆ

Media

The media component is useful whenever you have an image with a block of text sitting next to it.

(Image)
This text will appear to the right of the image.
.media
  .media__image
    (Image)
  .media__message
    This text will appear to the right of the image.

Can also be used when the media item should appear on the right (rather than left) of the text:

(Image)
This text will appear to the left of the image.
.media
  .media__image--alt
    (Image)
  .media__message
    This text will appear to the left of the image.

It's also possible to have the floating behavior triggered at certain breakpoints, or disabled until a certain breakpoint:

(Image)
This text will appear to the left of the image on large screens and below the image on small screens.
.media.media--oh-v.media--lg-h
  .media__image
    (Image)
  .media__message
    This text will appear to the left of the image
    on large screens and below the image on small
    screens.
(Image)
This text will appear below the image on large screens and to the left of the image on small screens.
.media.media--lg-v
  .media__image
    (Image)
  .media__message
    This text will appear below the image on large
    screens and to the left of the image on small
    screens.

When using the media component with the the thumbnail helper, add the CSS modifier class media__image--thumb to the media__image object:

.media
  .media__image.media__image--thumb
    = thumb 'image.jpg'
  .media__message
    Message text.

Lists

Ordered and unordered lists are rendered using the Browser's default styles to avoid reproducing rules unnecessarily. When producing a list that should be "reset" to remove the default margins, padding, and bullets, please add the sl ("semantic list") class to the <ul> or <dl> tag:

%ul.sl
  %li ...

An additional CSS block provides a common style for lists. It can be applied to any HTML structure by giving the parent element the class list and child list items the class list__item:

  • First item
  • Second item
  • Third item
%ul.sl.list
  %li.list__item
    First item
  %li.list__item
    Second item
  %li.list__item
    Third item

Thumbnails

The thumb helper sets up an image container in the correct aspect ratio before the image has loaded; controlling the image size with clipping and creating a smoother experience for users while the page is loading.

When linking to a talk, simply add the CSS class play-link to the link wrapper you use.

If using the thumb helper within a media component, please note the special usage requirements.

Examples:

16:9 (default) thumb intended for use with talk images.
= thumb thumb_url
Square thumb intended for use on playlist and people images.
= thumb thumb_url, ratio: :square
4:3 thumb for use with legacy images.
= thumb thumb_url, ratio: :tv

By default, the image side of the media component makes up 30% of its total width when the two are displayed side-by-side, or 100px at mobile breakpoints.

Decorated headings

The heading helper produces output for a common lockup: a heading (of any of the standard heading classes) decorated with a link aligned to its baseline:

Heading text
Link text
= heading 'Heading text',
  link: 'Link text',
  href: '#compontents-headings'

Additional options can be used to configure the heading class and link target:

Heading text
Link text
= heading 'Heading text',
  link: 'Link text',
  href: '#compontents-headings',
  class: 'h2',
  target: '_blank'

Putting it all together

This example combines some of the components and typographic rules described above to show how they can be used together:

Heading
Link
Eyebrow

Title

Attribute Value • Attribute Value
Eyebrow

Title

Attribute Value • Attribute Value
Eyebrow

Title

Attribute Value • Attribute Value
= heading 'Heading',
  link: 'Link',
  href: '#components-together'

.list
  - 3.times do
    %article.list__item
      .media
        .media__image.media__image--thumb
          = thumb thumb_url
        .media__message
          .e1 Eyebrow
          %h3.h7.m5 Title
          .meta
            Attribute
            %span.meta__val Value
            &bull;
            Attribute
            %span.meta__val Value