The media component is useful whenever you have an image with a block of text sitting next to it.
.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:
.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:
.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.
.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 .media__image.media__image--thumb = thumb 'image.jpg' .media__message Message text.
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
("semantic list") class to the
%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
- First item
- Second item
- Third item
%ul.sl.list %li.list__item First item %li.list__item Second item %li.list__item Third item
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
to the link wrapper you use.
If using the
thumb helper within a media component, please
note the special usage requirements.
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.
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 'Heading text', link: 'Link text', href: '#compontents-headings'
Additional options can be used to configure the heading class and link target:
= 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 '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 • Attribute %span.meta__val Value