We primarily use La Mer Headline Black for larger headings for its condensed style while La Mer Text is used occassionally for smaller headings. Make sure to review your design specs on when to use which as they look very similar. Neue Haas Unica Pro is the default font and gets used for everything else.
For flexibility, letter case is never explicity set in CSS. This must be done on the editorial side.
Heading #1
PERFEKT POLISH
@extend%heading--1;
Heading #2
THE GLOWING BODY
@extend%heading--2;
Heading #3
“A luxurious lift from La Mer. With our new interlaced Stretch Matrix Complex.”
@extend%heading--3;
Heading #4
Lorem ipsum dolor sit amet
@extend%heading--4;
Body Copy - Regular
Die gezielt wirkenden Formulierungen von La Mer trainieren und verwandeln die Haut in einem Schritt. Das Geheimnis unserer Seren ist, dass sie hochwirksame Wirkstoffe tief unter die Hautoberfläche transportieren. Für optimal hydratisierte, strahlende und straffere Haut.
Modern versions of assistive technology, like screen readers, will read CSS generated content (how our icons are rendered), as well as specific Unicode characters. If an icon is used purely for decoration then you can make sure it is not read by adding aria-hidden="true".
Also available as a mixin: @include icon("plus");
icon icon--arrow--right--small
icon icon--arrow--right
icon icon--bag
icon icon--caret--down
icon icon--caret--left
icon icon--caret--right
icon icon--caret--up
icon icon--check
icon icon--checkbox--checked
icon icon--checkbox
icon icon--circle-caret--down--filled
icon icon--circle-caret--down
icon icon--circle-caret--left--filled
icon icon--circle-caret--left
icon icon--circle-caret--right--filled
icon icon--circle-caret--right
icon icon--circle-caret--up--filled
icon icon--circle-caret--up
icon icon--close
icon icon--email
icon icon--expert_tips
icon icon--facebook
icon icon--hamburger
icon icon--heart--filled
icon icon--heart
icon icon--instagram
icon icon--livechat
icon icon--location--filled
icon icon--location
icon icon--logo
icon icon--map-marker
icon icon--minus
icon icon--pinterest--square--filled
icon icon--pinterest--square
icon icon--pinterest
icon icon--play
icon icon--plus
icon icon--question--circle
icon icon--radio--checked
icon icon--radio
icon icon--search
icon icon--twitter
icon icon--youtube
Default Typography
Accessibility Requirement
Pages should be structured in a hierarchical manner and references sequentially. Beispiel: do not skip from a <h2> to an <h4> reference.
This is a paragraph block below a hr tag Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
