Layout components ΒΆ
Media
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__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:
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 '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