[{"contentLink":{"id":359270,"workId":0,"guidValue":"65fe6545-968e-4e74-99a1-75f87b2fa963","providerName":null,"url":"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/","expanded":null},"name":"Content highlights","language":null,"existingLanguages":null,"masterLanguage":null,"contentType":["Page","ComponentPage"],"parentLink":null,"routeSegment":null,"url":null,"changed":null,"created":null,"startPublish":null,"stopPublish":null,"saved":null,"status":null,"teaserImageUrl":null,"invertTimestampSetting":null,"renderedHtml":"\n<div class=\"content-wrap content-wrap--max-width\">\n        <h1 class=\"component-page__title\">Content highlights</h1>\n</div>\n\n\n\n\n\n\n\n<div class=\"content-pre-wrap--gray\">\n    <div class=\"content-wrap content-wrap--max-width\">\n\n        \n<div><div class=\"row row0\"><div class=\"block col0 sharedtabsblock col-xs-12 full\">\n    <div >\n            <tabs v-slot=\"props\" :is-centered=\"false\">\n                    <tab title=\"Variations\" :current-tab=\"props.currentTab\">    \n<div><div class=\"row row0\"><div class=\"block col0 sharedcontentblock col-xs-12 full\">\n<div class=\"content-block body-text \">\n        <h2 class=\"block-header\" id=\"cid_359500\">Introduction</h2>\n    \n\n\n<p>Content highlights components are designed to present various information types uniformly throughtout UPM businesses and web sites. These information types include call-to-actions, contact information, event information, product information and different listings. The content highlights have hard-coded but optional fields so they offer flexibility in their use. The content highlights use standard aspect ratio of 16:9.</p>\n</div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row2\"><div class=\"block col0 sharedtitleblock col-xs-12 full\">\n\n\n<h2 class=\"title-block__title  title-block--align-left\" id=\"cid_359486\">\n\tContent \n</h2></div></div><div class=\"row row3\"><div class=\"block col0 sgdcomponentrenderblock col-xs-12 full\">\n<component-renderer-container \n    title=\"Default\"\n    id=\"cid_359478\"\n    url=\"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/#cid_359478\"\n    content=\"&lt;div class=&quot;col-xs-12 col-md-4&quot;&gt; &lt;content-highlight :no-text-clamp=&quot;false&quot; :lazy-load-images=&quot;true&quot; :feedItem=&quot;{&#xA;      image: &#x27;https://www.brand.upm.com/siteassets/images/UPM_Key_image_8.jpg?preset=tmpl-size-third&#x27;,&#xA;      title: &#x27;Our story is one of creativity&#x27;,&#xA;      excerpt: &#x27;It is a story of thousands of people around the world working together&#x27;,&#xA;      date: &#x27;Fri Mar 7 2025 10:28:16 GMT&#x2B;0300&#x27;,&#xA;      post_type_translation: &#x27;Article &#x27;,&#xA;      author: &#x27;Author Name&#x27;,&#xA;      link: &#x27;#&#x27; }&quot;&#xA;&gt;&lt;/content-highlight&gt;&lt;/div&gt;\" \n    theme=\"light\"\n    language=\"html\"\n    lang=\"en\"\n    typekit-id=\"hvd7yxu\"\n    :keep-component-dimensions=\"false\"\n    :hide-code-block=\"false\">\n</component-renderer-container>\n\n\n</div></div><div class=\"row row4\"><div class=\"block col0 sgdcomponentrenderblock col-xs-12 full\">\n<component-renderer-container \n    title=\"List\"\n    id=\"cid_359492\"\n    url=\"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/#cid_359492\"\n    content=\"&lt;div class=&quot;content-wrap content-wrap--max-width&quot;&gt;&#xA;  &lt;div class=&quot;row content-card--list-view&quot;&gt;&#xA;    &lt;div class=&quot;col-xs-12 col-md-3&quot;&gt;&#xA;      &lt;a href=&quot;#&quot;&gt;&#xA;        &lt;div class=&quot;content-card&quot;&gt;&#xA;          &lt;div class=&quot;content-card__img-container&quot;&gt;&#xA;            &lt;img class=&quot;content-card__img&quot; src=&quot;https://brand.upm.com/siteassets/images/cards/card1.jpg?preset=tmpl-size-quarter&quot; /&gt;&#xA;          &lt;/div&gt;&#xA;          &lt;div class=&quot;content-card__content&quot;&gt;&#xA;            &lt;h3 class=&quot;content-card__title&quot;&gt;Article with blocks&lt;/h3&gt;&#xA;            &lt;span class=&quot;content-card__publish-date&quot;&gt;15.6.2017&lt;/span&gt;&#xA;            &lt;text-clamp class=&quot;content-card__text&quot; text=&quot;If the text is too long for this area, it is truncated with three dots. Like seen here later on with this sentence, that goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on&quot;&gt;&lt;/text-clamp&gt;&#xA;          &lt;/div&gt;&#xA;          &lt;div class=&quot;content-card__article-link&quot;&gt;&#xA;            &lt;div class=&quot;btn btn--arrow-right&quot;&gt;Lue lis&#xE4;&#xE4;&lt;/div&gt;&#xA;          &lt;/div&gt;&#xA;        &lt;/div&gt;&#xA;      &lt;/a&gt;&#xA;    &lt;/div&gt;&#xA;    &lt;div class=&quot;col-xs-12 col-md-3&quot;&gt;&#xA;      &lt;a href=&quot;#&quot;&gt;&#xA;        &lt;div class=&quot;content-card&quot;&gt;&#xA;          &lt;div class=&quot;content-card__img-container&quot;&gt;&#xA;            &lt;img class=&quot;content-card__img&quot; src=&quot;https://brand.upm.com/siteassets/images/cards/card2.jpg?preset=tmpl-size-quarter&quot; /&gt;&#xA;          &lt;/div&gt;&#xA;          &lt;div class=&quot;content-card__content&quot;&gt;&#xA;            &lt;h3 class=&quot;content-card__title&quot;&gt;Article with blocks&lt;/h3&gt;&#xA;            &lt;span class=&quot;content-card__publish-date&quot;&gt;15.6.2017&lt;/span&gt;&#xA;            &lt;p title=&quot;lohkoja sis&#xE4;lt&#xE4;v&#xE4; artikkeli&quot; class=&quot;content-card__text&quot;&gt;lohkoja sis&#xE4;lt&#xE4;v&#xE4; artikkeli&lt;/p&gt;&#xA;          &lt;/div&gt;&#xA;          &lt;div class=&quot;content-card__article-link&quot;&gt;&#xA;            &lt;div class=&quot;btn btn--arrow-right&quot;&gt;Lue lis&#xE4;&#xE4;&lt;/div&gt;&#xA;          &lt;/div&gt;&#xA;        &lt;/div&gt;&#xA;      &lt;/a&gt;&#xA;    &lt;/div&gt;&#xA;    &lt;div class=&quot;col-xs-12 col-md-3&quot;&gt;&#xA;      &lt;a href=&quot;#&quot;&gt;&#xA;        &lt;div class=&quot;content-card&quot;&gt;&#xA;          &lt;div class=&quot;content-card__img-container&quot;&gt;&#xA;            &lt;img class=&quot;content-card__img&quot; src=&quot;https://brand.upm.com/siteassets/images/cards/card3.jpg?preset=tmpl-size-quarter&quot; /&gt;&#xA;          &lt;/div&gt;&#xA;          &lt;div class=&quot;content-card__content&quot;&gt;&#xA;            &lt;h3 class=&quot;content-card__title&quot;&gt;Article with blocks&lt;/h3&gt;&#xA;            &lt;span class=&quot;content-card__publish-date&quot;&gt;15.6.2017&lt;/span&gt;&#xA;            &lt;p title=&quot;lohkoja sis&#xE4;lt&#xE4;v&#xE4; artikkeli&quot; class=&quot;content-card__text&quot;&gt;lohkoja sis&#xE4;lt&#xE4;v&#xE4; artikkeli&lt;/p&gt;&#xA;          &lt;/div&gt;&#xA;          &lt;div class=&quot;content-card__article-link&quot;&gt;&#xA;            &lt;div class=&quot;btn btn--arrow-right&quot;&gt;Lue lis&#xE4;&#xE4;&lt;/div&gt;&#xA;          &lt;/div&gt;&#xA;        &lt;/div&gt;&#xA;      &lt;/a&gt;&#xA;    &lt;/div&gt;&#xA;   &lt;/div&gt;&#xA;&lt;/div&gt;\" \n    theme=\"light\"\n    language=\"html\"\n    lang=\"en\"\n    typekit-id=\"hvd7yxu\"\n    :keep-component-dimensions=\"false\"\n    :hide-code-block=\"false\">\n</component-renderer-container>\n\n\n</div></div><div class=\"row row5\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row6\"><div class=\"block col0 sharedtitleblock col-xs-12 full\">\n\n\n<h2 class=\"title-block__title  title-block--align-left\" id=\"cid_359488\">\n\tContact \n</h2></div></div><div class=\"row row7\"><div class=\"block col0 sgdcomponentrenderblock col-xs-12 full\">\n<component-renderer-container \n    title=\"Default\"\n    id=\"cid_359484\"\n    url=\"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/#cid_359484\"\n    content=\"&lt;div class=&quot;contact-with-image&quot;&gt;&#xA;            &lt;img class=&quot;contact-with-image__img&quot; src=&quot;https://www.brand.upm.com/siteassets/images/cards/example-contact.jpg?preset=tmpl-size-quarter&quot;  alt=&quot;&quot; /&gt;&#xA;            &lt;div class=&quot;contact-with-image__contact-info-container&quot;&gt;&#xA;            &lt;div class=&quot;contact-with-image__tag&quot;&gt;&lt;span&gt;UPM pulp&lt;/span&gt;&lt;/div&gt;&#xA;              &lt;h4 class=&quot;contact-with-image__name&quot;&gt;Unto Petteri Meik&#xE4;l&#xE4;inen&lt;/h4&gt;&#xA;              &lt;span class=&quot;contact-with-image__info-line&quot;&gt;Manager, Communications&lt;/span&gt;&#xA;              &lt;span class=&quot;contact-with-image__info-line&quot;&gt;UPM Paper Europe and North America&lt;/span&gt;&#xA;              &lt;a class=&quot;contact-with-image__link-to-personpage&quot;&gt;Biographical details&lt;/a&gt;&#xA;              &lt;span class=&quot;contact-with-image__info-line contact-with-image__info-line--wrap&quot;&gt;Firstname.Surname-Lastname(a)upm.com&lt;/span&gt;&#xA;              &lt;span class=&quot;contact-with-image__info-line&quot;&gt;Tel. &#x2B;555 821 3109 225&lt;/span&gt;&#xA;              &lt;span class=&quot;contact-with-image__twitter-name&quot;&gt;&lt;icon-x&gt;&lt;/icon-x&gt;&lt;a href=&quot;&quot; target=&quot;_blank&quot;&gt;username&lt;/a&gt;&lt;/span&gt;&#xA;            &lt;/div&gt;&#xA;          &lt;/div&gt;\" \n    theme=\"light\"\n    language=\"html\"\n    lang=\"en\"\n    typekit-id=\"hvd7yxu\"\n    :keep-component-dimensions=\"false\"\n    :hide-code-block=\"false\">\n</component-renderer-container>\n\n\n</div></div><div class=\"row row8\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row9\"><div class=\"block col0 sharedtitleblock col-xs-12 full\">\n\n\n<h2 class=\"title-block__title  title-block--align-left\" id=\"cid_359490\">\n\tEvent \n</h2></div></div><div class=\"row row10\"><div class=\"block col0 sgdcomponentrenderblock col-xs-12 full\">\n<component-renderer-container \n    title=\"Default\"\n    id=\"cid_359480\"\n    url=\"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/#cid_359480\"\n    content=\"&lt;div class=&quot;col-xs-12 col-md-6&quot;&gt;&#xA;&lt;event-highlight :lazy-load-images=&quot;true&quot; :event-item=&quot;{&#xA;      image: &#x27;https://www.brand.upm.com/siteassets/images/UPM_Key_image_8.jpg?preset=tmpl-size-third&#x27;,&#xA;      category: &#x27;Conference&#x27;,&#xA;      title: &#x27;Creativity event&#x27;,&#xA;      location: &#x27;Helsinki, Finland&#x27;,&#xA;      startDate: &#x27;Fri Sep 7 2025 10:28:16 GMT&#x2B;0300&#x27;,&#xA;      endDate: &#x27;Fri Sep 8 2025 10:28:16 GMT&#x2B;0300&#x27;,&#xA;      link: &#x27;#&#x27;,&#xA;      linkText: &#x27;Read more&#x27; }&quot;&gt;&lt;/event-highlight&gt;&#xA;&lt;/div&gt;&#xA;&lt;div class=&quot;col-xs-12 col-md-6&quot;&gt;&#xA;&lt;event-highlight :lazy-load-images=&quot;true&quot; :event-item=&quot;{&#xA;      image: &#x27;https://www.brand.upm.com/siteassets/images/UPM_Key_image_1.jpg?preset=tmpl-size-third&#x27;,&#xA;      category: &#x27;Conference&#x27;,&#xA;      title: &#x27;Past event example&#x27;,&#xA;      location: &#x27;Helsinki, Finland&#x27;,&#xA;      startDate: &#x27;Fri Sep 17 2024 10:28:16 GMT&#x2B;0300&#x27;,&#xA;      endDate: &#x27;Fri Sep 18 2024 10:28:16 GMT&#x2B;0300&#x27;,&#xA;      link: &#x27;#&#x27;,&#xA;      linkText: &#x27;Read more&#x27;,&#xA;      pastDisplayMode: true }&quot;&gt;&lt;/event-highlight&gt;&#xA;&lt;/div&gt;\" \n    theme=\"light\"\n    language=\"html\"\n    lang=\"en\"\n    typekit-id=\"hvd7yxu\"\n    :keep-component-dimensions=\"false\"\n    :hide-code-block=\"false\">\n</component-renderer-container>\n\n\n</div></div><div class=\"row row11\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row12\"><div class=\"block col0 sharedtitleblock col-xs-12 full\">\n\n\n<h2 class=\"title-block__title  title-block--align-left\" id=\"cid_359493\">\n\tCall-to-action \n</h2></div></div><div class=\"row row13\"><div class=\"block col0 sgdcomponentrenderblock col-xs-12 full\">\n<component-renderer-container \n    title=\"Default\"\n    id=\"cid_359495\"\n    url=\"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/#cid_359495\"\n    content=\"&#xA;      &lt;div class=&quot;cta-block&quot;&gt;&#xA;        &lt;div class=&quot;cta-block__image&quot; style=&quot;width: 100%; background-image: url(&#x27;https://www.brand.upm.com/siteassets/images/UPM_Key_image_3.jpg?preset=tmpl-size-fourth&#x27;)&quot;&gt;&lt;/div&gt;&#xA;        &lt;h3 class=&quot;cta-block__title&quot;&gt;Services&lt;/h3&gt;&#xA;        &lt;p class=&quot;cta-block__text&quot;&gt;Don&#x2019;t hesitate to reach us if you need more information about our services.&lt;/p&gt;&#xA;        &lt;a class=&quot;btn btn--secondary cta-block__btn&quot; href=&quot;#&quot;&gt;Contact us&lt;/a&gt;&#xA;      &lt;/div&gt;&#xA;\" \n    theme=\"light\"\n    language=\"html\"\n    lang=\"en\"\n    typekit-id=\"hvd7yxu\"\n    :keep-component-dimensions=\"false\"\n    :hide-code-block=\"false\">\n</component-renderer-container>\n\n\n</div></div><div class=\"row row14\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row15\"><div class=\"block col0 sharedtitleblock col-xs-12 full\">\n\n\n<h2 class=\"title-block__title  title-block--align-left\" id=\"cid_359496\">\n\tOther \n</h2></div></div><div class=\"row row16\"><div class=\"block col0 sgdcomponentrenderblock col-xs-12 full\">\n<component-renderer-container \n    title=\"Checker board\"\n    id=\"cid_359498\"\n    description=\"This component uses custom colours: greens #008342 and #024402\"\n    url=\"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/#cid_359498\"\n    content=\"&lt;div class=&quot;col-xs-12 col-md-6&quot;&gt; &lt;div class=&quot;content-with-bg-block&quot;&gt;&#xA;      &lt;div class=&quot;content-with-bg-block__text-wrapper&quot;&gt;&#xA;        &lt;h3 class=&quot;content-with-bg-block__title&quot;&gt;Heading text&lt;/h3&gt;&#xA;        &lt;text-clamp text=&quot;Duis varius eros vel mauris semper, et blandit ante venenatis. Sed pulvinar tristique sem sed cursus. Duis elementum a elit ut tempus. Aliquam eu justo mattis, ornare lorem vel, facilisis eros.Duis varius eros vel mauris semper, et blandit ante venenatis. Sed pulvinar tristique sem sed cursus. Duis elementum a elit ut tempus. Aliquam eu justo mattis, ornare lorem vel, facilisis eros.Duis varius eros vel mauris semper, et blandit ante venenatis. Sed pulvinar tristique sem sed cursus. Duis elementum a elit ut tempus. Aliquam eu justo mattis, ornare lorem vel, facilisis eros&quot;&#xA;          class=&quot;content-with-bg-block__text&quot;&gt;&lt;/text-clamp&gt;&#xA;        &lt;div class=&quot;content-with-bg-block__read-more-wrapper&quot;&gt;&#xA;          &lt;a class=&quot;content-with-bg-block__cta btn btn--on-dark btn--arrow-right&quot;&gt;Link&lt;/a&gt;&#xA;        &lt;/div&gt;&#xA;      &lt;/div&gt;&#xA;    &lt;/div&gt;&lt;/div&gt;&#xA;&lt;div class=&quot;col-xs-12 col-md-6&quot;&gt; &lt;div class=&quot;content-with-bg-block content-with-bg-block__color-gray&quot;&gt;&#xA;      &lt;div class=&quot;content-with-bg-block__text-wrapper&quot;&gt;&#xA;        &lt;h3 class=&quot;content-with-bg-block__title&quot;&gt;Heading text&lt;/h3&gt;&#xA;         &lt;text-clamp text=&quot;Duis varius eros vel mauris semper, et blandit ante venenatis. Sed pulvinar tristique sem sed cursus. Duis elementum a elit ut tempus. Aliquam eu justo mattis, ornare lorem vel, facilisis eros.Duis varius eros vel mauris semper, et blandit ante venenatis. Sed pulvinar tristique sem sed cursus. Duis elementum a elit ut tempus. Aliquam eu justo mattis, ornare lorem vel, facilisis eros.Duis varius eros vel mauris semper, et blandit ante venenatis. Sed pulvinar tristique sem sed cursus. Duis elementum a elit ut tempus. Aliquam eu justo mattis, ornare lorem vel, facilisis eros&quot;&#xA;         class=&quot;content-with-bg-block__text&quot;&gt;&lt;/text-clamp&gt;&#xA;        &lt;div class=&quot;content-with-bg-block__read-more-wrapper&quot;&gt;&#xA;          &lt;a class=&quot;content-with-bg-block__cta btn btn--on-dark btn--arrow-right&quot;&gt;Link&lt;/a&gt;&#xA;        &lt;/div&gt;&#xA;      &lt;/div&gt;&#xA;    &lt;/div&gt;&lt;/div&gt;\" \n    theme=\"light\"\n    language=\"html\"\n    lang=\"en\"\n    typekit-id=\"hvd7yxu\"\n    :keep-component-dimensions=\"false\"\n    :hide-code-block=\"false\">\n</component-renderer-container>\n\n\n</div></div></div>                    </tab>\n                    <tab title=\"Examples\" :current-tab=\"props.currentTab\">    \n<div><div class=\"row row0\"><div class=\"block col0 sharedcontainerblock sharedcontainerblock--gray col-xs-12 full\">\n\t<div class=\"container-block \">\n\t    <div class=\"content-wrap content-wrap--max-width content-wrap--container \">\n\t        \n<div><div class=\"row row0\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359690\">\n\tHorizontal 50/50 content cards provide an effective way to drive attention to the chosen content \n</h2></div></div><div class=\"row row2\"><div class=\"block col0 sharedcontentblock col-xs-12 col-md-offset-1 col-md-10 full-with-offset\">\n<div class=\"content-block body-text \">\n    \n\n\n<p class=\"ingress\">Preferably use only one large 50/50 horizontal content card in a view to keep the look calmful. You can choose to have the image on the right or left. Button of the 50/50 card informs the user about possibility to navigate to the content.</p>\n</div>\n</div></div><div class=\"row row3\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row4\"><div class=\"block col0 sharedcontentwithbgblock col-xs-12 col-md-6 half\">\n\n\n<div class=\"content-with-bg-block content-with-bg-block__color-gray \">\n    <div class=\"content-with-bg-block__text-wrapper\">\n        <h3 class=\"content-with-bg-block__title\" id=\"cid_359692\">This is the title of the card. Keep the title and the body text succinct where possible</h3>\n<text-clamp class=\"content-with-bg-block__text\"\n                        :failsafe=\"350\"\n                        text=\"This is the body text of this card.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam fringilla maecenas euismod suspendisse at gravida pulvinar nibh accumsan. Fringilla ullamcorper volutpat scelerisque at maecenas mi nunc, sed. Lectus ut nullam in duis senectus. Tellus a mi suspendisse odio sed pellentesque est. Tincidunt sociis eu et, euismod. Odio scelerisque sit odio etiam ultricies diam. Tempor adipiscing in venenatis elementum at purus porttitor elit. Sem nam porttitor sapien integer mi. Molestie sed amet, ipsum maecenas. Amet, enim augue lacus, vitae scelerisque erat. Quam tristique in quisque viverra sit.  \">\n            </text-clamp>\n\n    <div class=\"content-with-bg-block__read-more-wrapper\">\n        <a class=\"content-with-bg-block__cta btn btn--on-dark btn--arrow-right\"\n           href=\"/brand-identity-in-use/ui-components/cards/\"\n           >Tertiary internal</a>\n    </div>    </div>\n</div></div><div class=\"block col1 sharedimageblock col-xs-12 col-md-6 half\">\n\n\n\n\n\n\t\t\t<div class=\"wide-banner-container\">\n\n\n            <img class=\"image-block-full-height image-block-wide-banner lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/ir_yleiskuva1.jpg?preset=img-size-half'}\" \n                 width=\"712\"\n                 height=\"400\"\n                 style=\"width: 100%; aspect-ratio: 712/400;\" />\n\t\t\t</div>\n</div></div><div class=\"row row5\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row6\"><div class=\"block col0 sharedimageblock col-xs-12 col-md-6 half\">\n\n\n\n\n\n\t\t\t<div class=\"wide-banner-container\">\n\n\n            <img class=\"image-block-full-height image-block-wide-banner lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=img-size-half'}\" \n                 width=\"712\"\n                 height=\"400\"\n                 style=\"width: 100%; aspect-ratio: 712/400;\" />\n\t\t\t</div>\n</div><div class=\"block col1 sharedcontentwithbgblock col-xs-12 col-md-6 half\">\n\n\n<div class=\"content-with-bg-block content-with-bg-block__color-gray \">\n    <div class=\"content-with-bg-block__text-wrapper\">\n        <h3 class=\"content-with-bg-block__title\" id=\"cid_359698\">This is the title of the card. Keep the title and the body text succinct where possible</h3>\n<text-clamp class=\"content-with-bg-block__text\"\n                        :failsafe=\"350\"\n                        text=\"This is the body text of this card.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam fringilla maecenas euismod suspendisse at gravida pulvinar nibh accumsan. Fringilla ullamcorper volutpat scelerisque at maecenas mi nunc, sed. Lectus ut nullam in duis senectus. Tellus a mi suspendisse odio sed pellentesque est. Tincidunt sociis eu et, euismod. Odio scelerisque sit odio etiam ultricies diam. Tempor adipiscing in venenatis elementum at purus porttitor elit. Sem nam porttitor sapien integer mi. Molestie sed amet, ipsum maecenas. Amet, enim augue lacus, vitae scelerisque erat. Quam tristique in quisque viverra sit.  \">\n            </text-clamp>\n\n    <div class=\"content-with-bg-block__read-more-wrapper\">\n        <a class=\"content-with-bg-block__cta btn btn--on-dark btn--arrow-right\"\n           href=\"/brand-identity-in-use/ui-components/cards/\"\n           >Tertiary internal</a>\n    </div>    </div>\n</div></div></div><div class=\"row row7\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div></div>\n\t    </div>\n\t</div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row2\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359504\">\n\tChoose the number of colums (2 or 3) for desktop regarding the amount of highlights presented \n</h2></div></div><div class=\"row row3\"><div class=\"block col0 sharedcontentblock col-xs-12 col-md-offset-1 col-md-10 full-with-offset\">\n<div class=\"content-block body-text \">\n    \n\n\n<p class=\"ingress\">You can modify content cards to have a button if you think it is necessary to inform user which action triggers when one clicks the card. However, be consistent. Don&rsquo;t mix the cards with buttons with the cards without. If you manually create the texts for the cards, try to make the length of the copy consistent.</p>\n</div>\n</div></div><div class=\"row row4\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row5\"><div class=\"block col0 sharedcontenthighlightblock col-xs-12 col-md-6 half\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-half'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"712\"\n                 height=\"401\"\n                 style=\"aspect-ratio: 712/401;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col1 sharedcontenthighlightblock col-xs-12 col-md-6 half\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-half'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"712\"\n                 height=\"401\"\n                 style=\"aspect-ratio: 712/401;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div></div><div class=\"row row6\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row7\"><div class=\"block col0 sharedcontainerblock sharedcontainerblock--gray col-xs-12 full\">\n\t<div class=\"container-block \">\n\t    <div class=\"content-wrap content-wrap--max-width content-wrap--container \">\n\t        \n<div><div class=\"row row0\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359685\">\n\tUse correct safe areas around the text and the button (if included) when presenting the cards on colored background \n</h2></div></div><div class=\"row row2\"><div class=\"block col0 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359686,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359686\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea. Lectus id est vulputate scelerisque vulputate. Porta magna massa, a ultrices quisque pulvinar...\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col1 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359686,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359686\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea. Lectus id est vulputate scelerisque vulputate. Porta magna massa, a ultrices quisque pulvinar...\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col2 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359686,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359686\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea. Lectus id est vulputate scelerisque vulputate. Porta magna massa, a ultrices quisque pulvinar...\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div></div><div class=\"row row3\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div></div>\n\t    </div>\n\t</div>\n</div></div><div class=\"row row8\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row9\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359511\">\n\tManually defined cards present neither a date nor the type of the content \n</h2></div></div><div class=\"row row10\"><div class=\"block col0 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359513,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_7.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359513\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea. Lectus id est vulputate scelerisque vulputate. Porta magna massa, a ultrices quisque pulvinar...\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col1 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359513,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_7.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359513\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea. Lectus id est vulputate scelerisque vulputate. Porta magna massa, a ultrices quisque pulvinar...\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col2 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359513,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_7.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359513\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea. Lectus id est vulputate scelerisque vulputate. Porta magna massa, a ultrices quisque pulvinar...\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div></div><div class=\"row row11\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row12\"><div class=\"block col0 sharedcontainerblock sharedcontainerblock--gray col-xs-12 full\">\n\t<div class=\"container-block \">\n\t    <div class=\"content-wrap content-wrap--max-width content-wrap--container \">\n\t        \n<div><div class=\"row row0\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359703\">\n\tUse consistent photos when presenting multiple contact cards in a view \n</h2></div></div><div class=\"row row2\"><div class=\"block col0 sharedcontentblock col-xs-12 col-md-offset-1 col-md-10 full-with-offset\">\n<div class=\"content-block body-text \">\n    \n\n\n<p class=\"ingress\">You may use the green business segment labels if you think the user needs that information.</p>\n</div>\n</div></div><div class=\"row row3\"><div class=\"block col0 sharedcontactpersonsliftupblock col-xs-12 full\">\n<div class=\"contact-persons-lift-up-block\">\n    <div class=\"row contact-persons-lift-up-block--center\" >\n            <div class=\"col-xs-12 col-sm-4 col-md-3 col-lg-2\">\n                        <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/a67ddfaa36fa47da9dee88f95198d64d/example-contact-1-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example Name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n            <div class=\"contact-with-image__tag\"><span>Business or function</span></div>\n        <h4 class=\"contact-with-image__name\">Example Name</h4>\n            <span class=\"contact-with-image__info-line\">Director</span>\n            <span class=\"contact-with-image__info-line\">Tel. &#x2B;358 (0)40 123 4567 </span>\n            <div class=\"contact-with-image__social-media\">\n                <span class=\"contact-with-image__twitter-name\"><icon-x></icon-x><a href=\"https://twitter.com/username\" target=\"_blank\">username</a></span>\n            </div>\n        </div>\n\n        </div>\n\n            </div>\n            <div class=\"col-xs-12 col-sm-4 col-md-3 col-lg-2\">\n                        <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/a1746cff78014363b5a4be9947087d0c/example-contact-2-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example Name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n            <div class=\"contact-with-image__tag\"><span>Business or function</span></div>\n        <h4 class=\"contact-with-image__name\">Example Name</h4>\n            <span class=\"contact-with-image__info-line\">Manager</span>\n            <span class=\"contact-with-image__info-line\">Tel. &#x2B;358 (0)40 123 4567 </span>\n            <div class=\"contact-with-image__social-media\">\n                <span class=\"contact-with-image__twitter-name\"><icon-x></icon-x><a href=\"https://twitter.com/username\" target=\"_blank\">username</a></span>\n            </div>\n        </div>\n\n        </div>\n\n            </div>\n            <div class=\"col-xs-12 col-sm-4 col-md-3 col-lg-2\">\n                        <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/a60ba3a8ef5a4fbaa83a0f63a2260fd1/example-contact-3-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example Name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n            <div class=\"contact-with-image__tag\"><span>Business or function</span></div>\n        <h4 class=\"contact-with-image__name\">Example Name</h4>\n            <span class=\"contact-with-image__info-line\">Specialist</span>\n            <span class=\"contact-with-image__info-line\">Tel. &#x2B;358 (0)40 123 4567 </span>\n            <div class=\"contact-with-image__social-media\">\n                <span class=\"contact-with-image__twitter-name\"><icon-x></icon-x><a href=\"https://twitter.com/username\" target=\"_blank\">username</a></span>\n            </div>\n        </div>\n\n        </div>\n\n            </div>\n            <div class=\"col-xs-12 col-sm-4 col-md-3 col-lg-2\">\n                        <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/d9ebeef2107a499f8669d210bd2d22c3/example-contact-4-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example Name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n            <div class=\"contact-with-image__tag\"><span>Business or function</span></div>\n        <h4 class=\"contact-with-image__name\">Example Name</h4>\n            <span class=\"contact-with-image__info-line\">Assistant</span>\n            <span class=\"contact-with-image__info-line\">Tel. &#x2B;358 (0)40 123 4567 </span>\n            <div class=\"contact-with-image__social-media\">\n                <span class=\"contact-with-image__twitter-name\"><icon-x></icon-x><a href=\"https://twitter.com/username\" target=\"_blank\">username</a></span>\n            </div>\n        </div>\n\n        </div>\n\n            </div>\n    </div>\n</div></div></div><div class=\"row row4\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div></div>\n\t    </div>\n\t</div>\n</div></div><div class=\"row row13\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row14\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359525\">\n\tIf the cards are on white background, choose a card with text aligned with the photo  \n</h2></div></div><div class=\"row row15\"><div class=\"block col0 sharedcontentblock col-xs-12 col-md-offset-1 col-md-10 full-with-offset\">\n<div class=\"content-block body-text \">\n    \n\n\n<p class=\"ingress\">In some cases you dont want to reveal contact details, but instead provide a link to more comprehensive description of the person. This may be the case with the executives or board members.</p>\n</div>\n</div></div><div class=\"row row16\"><div class=\"block col0 upmpapercontactpersonlistingblock col-xs-12 full\">\n<div class=\"contact-person-listing-block\">\n    <h2 class=\"text-center\"  id=\"cid_359520\"></h2>\n    <div class=\"row\" >\n                <div class=\"col-xs-12 col-sm-6 col-md-3\">\n                            <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/3b1254a073204fd38a2b24e1d91d2930/example-contact-1-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n        <h4 class=\"contact-with-image__name\">Example name</h4>\n            <span class=\"contact-with-image__info-line\">Director</span>\n            <a class=\"contact-with-image__link-to-personpage\" href=\"/brand-identity-in-use/ui-components/cards/contacts-2/example-contact1/\">Biographical details</a>\n        </div>\n\n        </div>\n\n                </div>\n                <div class=\"col-xs-12 col-sm-6 col-md-3\">\n                            <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/f45a9096b64d4ebb94153065d266c3d5/example-contact-2-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n        <h4 class=\"contact-with-image__name\">Example name</h4>\n            <span class=\"contact-with-image__info-line\">Manager</span>\n            <a class=\"contact-with-image__link-to-personpage\" href=\"/brand-identity-in-use/ui-components/cards/contacts-2/example-contact2/\">Biographical details</a>\n        </div>\n\n        </div>\n\n                </div>\n                <div class=\"col-xs-12 col-sm-6 col-md-3\">\n                            <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/f1a68fd72cae4e98bf7277c9469014c7/example-contact-3-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n        <h4 class=\"contact-with-image__name\">Example name</h4>\n            <span class=\"contact-with-image__info-line\">Specialist</span>\n            <a class=\"contact-with-image__link-to-personpage\" href=\"/brand-identity-in-use/ui-components/cards/contacts-2/example-contact3/\">Biographical details</a>\n        </div>\n\n        </div>\n\n                </div>\n                <div class=\"col-xs-12 col-sm-6 col-md-3\">\n                            <div class=\"contact-with-image\">\n            \n\n            <img class=\"contact-with-image__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/contentassets/9339adb835f4456d9f25bd975781400b/example-contact-4-restricted.jpg?preset=contact-person'}\" \n                 alt=\"Example name\" \n                 width=\"356\"\n                 height=\"356\"\n                 style=\"aspect-ratio: 356/356;\" />\n        <div class=\"contact-with-image__contact-info-container\">\n        <h4 class=\"contact-with-image__name\">Example name</h4>\n            <span class=\"contact-with-image__info-line\">Assistant</span>\n            <a class=\"contact-with-image__link-to-personpage\" href=\"/brand-identity-in-use/ui-components/cards/contacts-2/example-contact4/\">Biographical details</a>\n        </div>\n\n        </div>\n\n                </div>\n    </div>\n</div></div></div><div class=\"row row17\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row18\"><div class=\"block col0 sharedcontainerblock col-xs-12 full\">\n\t<div class=\"container-block  container-block--red\">\n\t    <div class=\"content-wrap content-wrap--max-width content-wrap--horizontal-padding content-wrap--vertical-padding\">\n\t        \n<div><div class=\"row row0\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359711\">\n\tLift ups in background color block \n</h2></div></div><div class=\"row row2\"><div class=\"block col0 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col1 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col2 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div></div><div class=\"row row3\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div></div>\n\t    </div>\n\t</div>\n</div></div><div class=\"row row19\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div><div class=\"row row20\"><div class=\"block col0 sharedbackgroundimageblock col-xs-12 full\">\n\n\n<div class=\"content-with-bg-image-block \" style=\"background-image: url('https://www.brand.upm.com/siteassets/images/upm_key_image_3.jpg?preset=hero-image')\">\n\t<div class=\"container-block\">\n\t    <div class=\"content-wrap content-wrap--max-width content-wrap--horizontal-padding content-wrap--vertical-padding\">\n\t        \n<div><div class=\"row row0\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedtitleblock col-xs-12 full\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_453411\">\n\tLift ups in background image block \n</h2></div></div><div class=\"row row2\"><div class=\"block col0 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col1 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div><div class=\"block col2 sharedcontenthighlightblock col-xs-12 col-sm-4 col-md-4 third\">\n\n\n\n\n\n    <data-layer-link class=\"content-highlight content-highlight--16x9image\" \n                     href=\"/brand-identity-in-use/ui-components/cards/\" \n                     callback-function=\"sendDataLayer\" \n                     :args=\"{&quot;id&quot;:359509,&quot;url&quot;:&quot;/brand-identity-in-use/ui-components/cards/&quot;,&quot;blockTitle&quot;:&quot;This is the title of the card. Keep the title and the body text succinct where possible&quot;}\">\n        \t        <div class=\"content-highlight__image-container\">\n\n\n            <img class=\"content-highlight__img lazy-load\" \n                 v-lazy=\"{src: 'https://www.brand.upm.com/siteassets/images/upm_key_image_1.jpg?preset=tmpl-size-third'}\" \n                 alt=\"This is the title of the card. Keep the title and the body text succinct where possible\" \n                 width=\"475\"\n                 height=\"267\"\n                 style=\"aspect-ratio: 475/267;\" />\n\t        </div>\n\t<div class=\"content-highlight__content\">\n\t    <div class=\"content-highlight__release-info\">\n\t            <span >Type of the Highlight</span>\n\t                <span> | </span>\n\t            <date v-cloak >11/17/2020 22:00:00</date>\n\t    </div>\n\t    <h4 class=\"content-highlight__title\" id=\"cid_359509\" >This is the title of the card. Keep the title and the body text succinct where possible</h4>\n<text-clamp class=\"content-highlight__text use-min-height\" text=\"This is the body text of the cards. Use the least amount of text that will be needed for user to choose whether to read more or not. Massa vivamus feugiat ac dictum cursus sagittis. Tincidunt nunc duis enim nunc ac nam tristique platea.\"></text-clamp>\n\t            <div class=\"content-highlight__bottom-cta\">\n\t                <div class=\"btn btn--arrow-right\">Tertiary internal</div>\n\t            </div>\n\t</div>\n    \n    </data-layer-link>\n\n</div></div><div class=\"row row3\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div></div>\n\t    </div>\n\t</div>\n</div>\n\n</div></div><div class=\"row row21\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row22\"><div class=\"block col0 sharedtitleblock col-xs-12 col-md-offset-2 col-md-8 full-with-two-col-offset\">\n\n\n<h2 class=\"title-block__title title-block--extra-margin \" id=\"cid_359532\">\n\tExpanding card stacks used in the news and blog listings are always on the light color #F8F7EE background \n</h2></div></div><div class=\"row row23\"><div class=\"block col0 sharedcontentblock col-xs-12 col-md-offset-1 col-md-10 full-with-offset\">\n<div class=\"content-block body-text \">\n    \n\n\n<p class=\"ingress\">Since this element uses huge area, it&rsquo;s most often good decision to place expanding card stacks in the bottom of the page. Stacks with 3 columns should show 9 cards as default. More cards are shown after the user press the &ldquo;Show more&rdquo; button under the element. On mobile the cards are stacked vertically.</p>\n</div>\n</div></div><div class=\"row row24\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-small\" >&nbsp;</div>\n</div></div><div class=\"row row25\"><div class=\"block col0 sharedcontentlibraryblock col-xs-12 full\">\n\n\n\n\n<content-library v-cloak :block-id=\"359536\"\n                 :hide-type-filter=\"true\"\n                 :hide-tag-filter=\"true\"\n                 :hide-free-search=\"true\"\n                 :hide-items-date=\"false\"\n                 additional-link=\"https://www.brand.upm.com/globalassets/global-elements/demo/placeholder-image.jpg\"\n                 additional-link-text=\"Show more\"></content-library></div></div></div>                    </tab>\n            </tabs>\n    </div>\n</div></div><div class=\"row row1\"><div class=\"block col0 sharedextramarginblock col-xs-12 full\">\n<div class=\"extra-margin-block margin-size-medium\" >&nbsp;</div>\n</div></div></div>\n\n    </div>\n</div>","layoutViewModel":{"pageTitle":"Content highlights | UPM Brand","companyName":"UPM","companyLogo":"","companyLogoOffsetTop":0,"companyLogoMobile":"","siteName":"Brand","businessLogo":"","headingTitle":null,"leadText":null,"businessLogoOffsetTop":0,"homeLink":"/","homeLinkAbsoluteUrl":"https://www.brand.upm.com/","homeName":null,"metaDescription":null,"pageLanguage":"en","pageLanguageNativeName":"English","googleTagManagerKey":"GTM-5P5RKSZL","dataLayerContentTypes":null,"applyDataLayer":false,"tagManagerEnabledForAllUsers":false,"contentType":"ComponentPage","canonicalUrl":"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/","defaultHrefLangUrl":"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/","excludeFromSearch":false,"noIndexPage":false,"mainMenuItems":[{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Brand foundation","url":"/brand-introduction/brand-foundation/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"711480","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"The foundation of our renewed brand rests upon two key strategic assets: our positioning statement and our brand promise. Used in a complementary manner, they define how we see ourselves and our place in the global context.","teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-12.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tone of voice","url":"/brand-introduction/tone-of-voice/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"711481","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"Discover how our material solutions company is dedicated to renewing everyday life through our actions and brand personality, guiding our communication and commitment to innovation.","teaserUrl":"/siteassets/images/upm-brand/brand-world-12---tone-of-voice2.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Visual narrative","url":"/brand-introduction/visual-narrative/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"735846","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/brand-world---visual-narrative.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Brand introduction","url":"/brand-introduction/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"711479","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"The first section of the Brand world encapsulates who we are as a brand. In it, you’ll discover the strategic pillars that define our identity and how these elements come together to express what we feel and sound like.","teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-2.png"},{"children":[{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Logo","url":"/brand-identity-in-use/design-fundamentals/logo/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692554","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"Discover UPM-Kymmene Corporation (UPM), a leading global company known for its innovative solutions and sustainable practices. Learn more about our corporate identity and the significance of our logo in our communications.","teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-01.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Business & product names","url":"/brand-identity-in-use/design-fundamentals/business-names-and-product-names/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692555","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-02.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Colors","url":"/brand-identity-in-use/design-fundamentals/colors/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"710451","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-03.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Typography","url":"/brand-identity-in-use/design-fundamentals/typography/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692556","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-04.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Layout","url":"/brand-identity-in-use/design-fundamentals/layout/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692559","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-05.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Image style","url":"/brand-identity-in-use/design-fundamentals/image-style/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692557","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-06.png"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Design fundamentals","url":"/brand-identity-in-use/design-fundamentals/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692552","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-6.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Photo style","url":"/brand-identity-in-use/photo-style/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"735847","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/visual-narrative/video_technicalities_video_ratios.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Video materials","url":"/brand-identity-in-use/Video-materials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"735848","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/visual-narrative/video_technicalities_1.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Social media branding & formats","url":"/brand-identity-in-use/digital-materials/social-media-branding-and-formats/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721225","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/digi-ads02.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Social media profile branding","url":"/brand-identity-in-use/digital-materials/social-media-profile-branding/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721226","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/brand-world_digi-adsintroduction1.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Digital advertising","url":"/brand-identity-in-use/digital-materials/digital-advertising/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721224","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/ads.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Additional graphic elements","url":"/brand-identity-in-use/digital-materials/additional-graphic-elements/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721223","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/read-more-pic.png"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Digital materials","url":"/brand-identity-in-use/digital-materials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721222","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/digi-ads02.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"PowerPoint","url":"/brand-identity-in-use/powerpoint/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"783975","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/upm_ppt_template_tablet_layouts2.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Printed materials","url":"/brand-identity-in-use/printed-materials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"811255","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/brand_upm_print_hero.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Booth branding","url":"/brand-identity-in-use/events-and-displays/booth-branding/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"789384","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/stand1.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Event displays","url":"/brand-identity-in-use/events-and-displays/event-displays/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"789656","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/popupwall-corp-lev.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Events & displays","url":"/brand-identity-in-use/events-and-displays/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"788696","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/stand1.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Signage","url":"/brand-identity-in-use/signage/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"857212","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/application-guidelines/signs-and-buildings/signage-teaser.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Header and navigation","url":"/brand-identity-in-use/ui-components/header-and-navigation/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359254","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tabbed content","url":"/brand-identity-in-use/ui-components/tabbed/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359256","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Background color","url":"/brand-identity-in-use/ui-components/background-color/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"361073","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tables","url":"/brand-identity-in-use/ui-components/tables/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359259","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Loaders","url":"/brand-identity-in-use/ui-components/loaders/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359260","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Video","url":"/brand-identity-in-use/ui-components/video/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359263","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Accordion","url":"/brand-identity-in-use/ui-components/accordion/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359264","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Socials","url":"/brand-identity-in-use/ui-components/socials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359265","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Modals, pop-ups, chats","url":"/brand-identity-in-use/ui-components/modals-and-popups/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"366899","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Heros","url":"/brand-identity-in-use/ui-components/heros/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359268","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Content highlights","url":"/brand-identity-in-use/ui-components/cards/","selected":true,"expanded":true,"columnBreak":false,"targetFrame":"_self","contentLink":"359270","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Carousels","url":"/brand-identity-in-use/ui-components/carousels/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359303","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Banners","url":"/brand-identity-in-use/ui-components/banners/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359304","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Dropdowns","url":"/brand-identity-in-use/ui-components/dropdown/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359305","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Buttons","url":"/brand-identity-in-use/ui-components/button/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359306","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Forms","url":"/brand-identity-in-use/ui-components/forms/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"382453","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tags & Labels","url":"/brand-identity-in-use/ui-components/tags--labels/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"452620","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null}],"linkType":"normal","enableSubLevelMenu":false,"name":"UI components","url":"/brand-identity-in-use/ui-components/","selected":true,"expanded":true,"columnBreak":false,"targetFrame":"_self","contentLink":"359250","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/visual-narrative/brand_upm_ui_thumbnail.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Brand identity in use","url":"/brand-identity-in-use/","selected":true,"expanded":true,"columnBreak":false,"targetFrame":"_self","contentLink":"692550","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"Discover UPM’s journey in sustainable innovation and explore our evolving brand identity, reflecting our commitment to renewing the everyday through diverse identity assets and applications.","teaserUrl":"/siteassets/images/upm-brand/upm-renewal-layouts3.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Accessibility guidelines","url":"/support/accessibility-guidelines/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"361040","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/accessibility-guidelines.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Support","url":"/support/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"704404","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-7.jpg"}],"complementaryMenuItems":[],"externalLinksForMobileNavigation":[],"sitesMenuItems":{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":null,"url":null,"selected":false,"expanded":false,"columnBreak":false,"targetFrame":null,"contentLink":null,"contentLiftUps":null,"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},"breadcrumbItems":[{"name":"UPM Brand","url":"/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":null,"contentLiftUps":null,"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"name":"Brand identity in use","url":"/brand-identity-in-use/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":null,"contentLiftUps":null,"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"name":"UI components","url":"/brand-identity-in-use/ui-components/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":null,"contentLiftUps":null,"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null}],"languageMenuItems":[],"alternateLanguages":[{"name":"en","title":"English","url":"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/","isExternal":false}],"openGraphModel":{"title":"Content highlights","type":"article","url":"https://www.brand.upm.com/brand-identity-in-use/ui-components/cards/","image":{"imageUrl":"https://www.brand.upm.com/siteassets/images/placeholders/upm-brand-default-hd.jpg","width":1424,"height":801},"siteName":"Content highlights | UPM Brand","admins":null,"description":null},"footerStickyAreaLinks":null,"floatingFooterSiteLink":null,"floatingFooterDownloadLink":null,"floatingFooterAudioBookLink":null,"pageSpecificStickyFooter":false,"pageSpecificFooter":false,"footerContentArea":[{"displayOption":"third","tag":null,"contentLink":{"id":365616,"workId":0,"guidValue":"bffe41e9-4b9b-4439-a49f-8772742e4392","providerName":null,"url":null,"expanded":null},"name":null,"language":null,"existingLanguages":[],"masterLanguage":null,"contentType":["Block","SharedContentBlock"],"parentLink":null,"routeSegment":null,"url":null,"changed":null,"created":null,"startPublish":null,"stopPublish":null,"saved":null,"status":null,"title":"","body":"<ul>\n<li><a href=\"https://www.upm.com/\" target=\"_blank\" rel=\"noopener\">UPM.com</a></li>\n<li><a href=\"https://materialhub.upm.com/l/imagebank\" target=\"_blank\" rel=\"noopener\">UPM Image Bank</a></li>\n<li><a href=\"https://www.brand.upm.com/system/contact-us/\">Contact us</a></li>\n</ul>","centerContentVertically":null,"horizontalMargin":"","renderedHtml":null,"anchorId":"cid_365616"},{"displayOption":"third","tag":null,"contentLink":{"id":1014684,"workId":0,"guidValue":"6cc8ab0a-e47c-403e-a6cf-94f31453661c","providerName":null,"url":null,"expanded":null},"name":null,"language":null,"existingLanguages":[],"masterLanguage":null,"contentType":["Block","SharedContentBlock"],"parentLink":null,"routeSegment":null,"url":null,"changed":null,"created":null,"startPublish":null,"stopPublish":null,"saved":null,"status":null,"title":"","body":"<p>This site is protected by reCAPTCHA and the <a href=\"https://policies.google.com/privacy\" target=\"_blank\" rel=\"noopener\">Google Privacy Policy</a> and <a href=\"https://policies.google.com/terms\" target=\"_blank\" rel=\"noopener\">Terms of Services</a> apply.</p>","centerContentVertically":false,"horizontalMargin":"","renderedHtml":null,"anchorId":"cid_1014684"}],"footerBottomRowText":"<ul>\n<li>Copyright &copy; 2026 UPM. All rights reserved.</li>\n<li><a href=\"https://www.upm.com/legal-notice/\" rel=\"noopener\">Legal Notice</a></li>\n<li><a href=\"https://privacy.upm.com/\" target=\"_blank\" rel=\"noopener\">Privacy Policy</a></li>\n</ul>","chapterFooterContent":null,"siteLinksContentArea":null,"isMyForestContent":false,"hideNavigation":false,"hideLanguageSelector":false,"showSocialShare":false,"cookiePolicyName":"UPMCookiePolicy","useCookiePolicyOptOut":true,"cookiePolicySettingsHeader":"<p><strong>Your selection</strong></p>\n<p>You control your data. We and our business partners use cookies to collect information about you for various purposes:</p>","cookiePolicySettingsFooter":"<p>You may withdraw your consent at any time by clicking the Cookie settings in the footer of each page.</p>","cookiePolicyOptOutContent":"<p>We use cookies on this website to ensure the best user experience and target personalised content and relevant advertising. Some cookies are necessary to provide you with a trustworthy service and cannot be declined. Choose the best option for you.&nbsp;</p>\n<p>For more information, please see our&nbsp;<a href=\"https://privacy.upm.com/\" target=\"_blank\" rel=\"noopener\">Privacy Policy</a>.</p>\n<p>&nbsp;</p>","cookiePolicyOptOutChangeContent":"<p><strong>Your current Cookie Settings</strong></p>\n<p>We use cookies on this website to ensure the best user experience and target personalised content and relevant advertising. Some cookies are necessary to provide you with a trustworthy service and cannot be declined. Choose the best option for you.&nbsp;</p>\n<p>For more information, please see our&nbsp;<a href=\"https://privacy.upm.com/\" target=\"_blank\" rel=\"noopener\">Privacy Policy</a>.</p>","cookiePolicyOptOutNeedsCookies":"<p><strong>This content requires you to approve cookies.</strong></p>\n<p>We use cookies on this website to ensure the best user experience and to target personalised content and relevant advertising. Please agree to approve cookies to see this content. See our&nbsp;<a href=\"https://privacy.upm.com/\">Privacy Policy</a>.</p>\n<p>&nbsp;</p>","actionBarContentArea":[{"displayOption":"full","tag":null,"contentLink":{"id":365618,"workId":0,"guidValue":"86bf6cfb-f946-491b-bc45-7957dce128f8","providerName":null,"url":null,"expanded":null},"name":null,"language":null,"existingLanguages":[],"masterLanguage":null,"contentType":["Block","SharedSearchActionBlock"],"parentLink":null,"routeSegment":null,"url":null,"changed":null,"created":null,"startPublish":null,"stopPublish":null,"saved":null,"status":null,"renderedHtml":"\n        <navigation-search-input-action search-page=\"/system/search/\"\n            :count=\"6\"></navigation-search-input-action>\n"}],"isMyForestPage":false,"isMyForestLobbyPage":false,"paperCatalogueType":"default","getInactiveMainMenuItems":[{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Brand foundation","url":"/brand-introduction/brand-foundation/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"711480","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"The foundation of our renewed brand rests upon two key strategic assets: our positioning statement and our brand promise. Used in a complementary manner, they define how we see ourselves and our place in the global context.","teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-12.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tone of voice","url":"/brand-introduction/tone-of-voice/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"711481","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"Discover how our material solutions company is dedicated to renewing everyday life through our actions and brand personality, guiding our communication and commitment to innovation.","teaserUrl":"/siteassets/images/upm-brand/brand-world-12---tone-of-voice2.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Visual narrative","url":"/brand-introduction/visual-narrative/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"735846","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/brand-world---visual-narrative.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Brand introduction","url":"/brand-introduction/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"711479","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"The first section of the Brand world encapsulates who we are as a brand. In it, you’ll discover the strategic pillars that define our identity and how these elements come together to express what we feel and sound like.","teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-2.png"},{"children":[{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Logo","url":"/brand-identity-in-use/design-fundamentals/logo/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692554","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"Discover UPM-Kymmene Corporation (UPM), a leading global company known for its innovative solutions and sustainable practices. Learn more about our corporate identity and the significance of our logo in our communications.","teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-01.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Business & product names","url":"/brand-identity-in-use/design-fundamentals/business-names-and-product-names/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692555","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-02.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Colors","url":"/brand-identity-in-use/design-fundamentals/colors/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"710451","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-03.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Typography","url":"/brand-identity-in-use/design-fundamentals/typography/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692556","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-04.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Layout","url":"/brand-identity-in-use/design-fundamentals/layout/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692559","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-05.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Image style","url":"/brand-identity-in-use/design-fundamentals/image-style/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692557","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/design-fundamentals-06.png"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Design fundamentals","url":"/brand-identity-in-use/design-fundamentals/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"692552","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-6.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Photo style","url":"/brand-identity-in-use/photo-style/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"735847","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/visual-narrative/video_technicalities_video_ratios.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Video materials","url":"/brand-identity-in-use/Video-materials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"735848","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/visual-narrative/video_technicalities_1.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Social media branding & formats","url":"/brand-identity-in-use/digital-materials/social-media-branding-and-formats/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721225","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/digi-ads02.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Social media profile branding","url":"/brand-identity-in-use/digital-materials/social-media-profile-branding/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721226","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/brand-world_digi-adsintroduction1.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Digital advertising","url":"/brand-identity-in-use/digital-materials/digital-advertising/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721224","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/ads.png"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Additional graphic elements","url":"/brand-identity-in-use/digital-materials/additional-graphic-elements/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721223","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/read-more-pic.png"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Digital materials","url":"/brand-identity-in-use/digital-materials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"721222","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/digi-ads02.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"PowerPoint","url":"/brand-identity-in-use/powerpoint/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"783975","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/upm_ppt_template_tablet_layouts2.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Printed materials","url":"/brand-identity-in-use/printed-materials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"811255","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/brand_upm_print_hero.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Booth branding","url":"/brand-identity-in-use/events-and-displays/booth-branding/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"789384","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/stand1.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Event displays","url":"/brand-identity-in-use/events-and-displays/event-displays/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"789656","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/popupwall-corp-lev.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Events & displays","url":"/brand-identity-in-use/events-and-displays/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"788696","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/stand1.jpg"},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Signage","url":"/brand-identity-in-use/signage/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"857212","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/application-guidelines/signs-and-buildings/signage-teaser.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Header and navigation","url":"/brand-identity-in-use/ui-components/header-and-navigation/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359254","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tabbed content","url":"/brand-identity-in-use/ui-components/tabbed/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359256","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Background color","url":"/brand-identity-in-use/ui-components/background-color/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"361073","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tables","url":"/brand-identity-in-use/ui-components/tables/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359259","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Loaders","url":"/brand-identity-in-use/ui-components/loaders/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359260","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Video","url":"/brand-identity-in-use/ui-components/video/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359263","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Accordion","url":"/brand-identity-in-use/ui-components/accordion/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359264","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Socials","url":"/brand-identity-in-use/ui-components/socials/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359265","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Modals, pop-ups, chats","url":"/brand-identity-in-use/ui-components/modals-and-popups/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"366899","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Heros","url":"/brand-identity-in-use/ui-components/heros/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359268","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Content highlights","url":"/brand-identity-in-use/ui-components/cards/","selected":true,"expanded":true,"columnBreak":false,"targetFrame":"_self","contentLink":"359270","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Carousels","url":"/brand-identity-in-use/ui-components/carousels/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359303","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Banners","url":"/brand-identity-in-use/ui-components/banners/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359304","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Dropdowns","url":"/brand-identity-in-use/ui-components/dropdown/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359305","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Buttons","url":"/brand-identity-in-use/ui-components/button/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"359306","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Forms","url":"/brand-identity-in-use/ui-components/forms/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"382453","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null},{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Tags & Labels","url":"/brand-identity-in-use/ui-components/tags--labels/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"452620","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":null}],"linkType":"normal","enableSubLevelMenu":false,"name":"UI components","url":"/brand-identity-in-use/ui-components/","selected":true,"expanded":true,"columnBreak":false,"targetFrame":"_self","contentLink":"359250","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/visual-narrative/brand_upm_ui_thumbnail.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Brand identity in use","url":"/brand-identity-in-use/","selected":true,"expanded":true,"columnBreak":false,"targetFrame":"_self","contentLink":"692550","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":"Discover UPM’s journey in sustainable innovation and explore our evolving brand identity, reflecting our commitment to renewing the everyday through diverse identity assets and applications.","teaserUrl":"/siteassets/images/upm-brand/upm-renewal-layouts3.jpg"},{"children":[{"children":[],"linkType":"normal","enableSubLevelMenu":false,"name":"Accessibility guidelines","url":"/support/accessibility-guidelines/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"361040","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/accessibility-guidelines.jpg"}],"linkType":"normal","enableSubLevelMenu":false,"name":"Support","url":"/support/","selected":false,"expanded":false,"columnBreak":false,"targetFrame":"_self","contentLink":"704404","contentLiftUps":[],"useExternalLinkIcon":false,"teaserText":null,"teaserUrl":"/siteassets/images/upm-brand/upm-brand-foundation-7.jpg"}],"quickNavigator":null,"inPageNavigation":false,"inPageNavigationItems":null,"inPageAnchorNavigation":false,"inPageAnchorNavigationItems":null,"relatedArticles":null,"tagPageReferences":null,"announcements":null,"footerSocialMediaLinks":[[{"linkType":"linkedin","link":"http://www.linkedin.com/company/upm-kymmene"},{"linkType":"facebook","link":"https://www.facebook.com/UPMGlobal"}],[{"linkType":"instagram","link":"https://www.instagram.com/upm_beyondfossils"},{"linkType":"x","link":"https://twitter.com/UPMGlobal"}],[{"linkType":"youtube","link":"http://www.youtube.com/upmdotcom"}]],"schemaOrgMetadata":null,"brightEdgeAutopilotEnabled":false,"enableSubLevelMenuForSite":false,"schemaMarkupEnabled":false},"metadata":{"isAuthenticated":false,"currentLanguage":"en"},"settings":{"navigation":{"isOnePager":false,"useChineseLogo":false,"showLanguageSelector":false},"newsLetterSubscriptionUrl":null,"kontaktiMChatKey":null,"navigationV2Enabled":true,"navigationV2Condensed":false},"finalTagReferences":[],"timestamp":{"showTimestamp":false,"date":"10.07.2023"},"showAnnouncements":false}]