{"id":173,"date":"2022-05-10T15:41:09","date_gmt":"2022-05-10T15:41:09","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/web-design-system-documentation\/?page_id=138"},"modified":"2024-05-07T02:08:49","modified_gmt":"2024-05-07T02:08:49","slug":"animated-icon-list","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/","title":{"rendered":"Animated icon"},"content":{"rendered":"\n<p class=\"is-style-lead\">The animated icon block allows you to callout important calls to action by adding animated graphical elements to the page.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">How to use the animated icon block<\/h2>\n\n\n\n<p class=\"is-style-lead\">This block can stand alone or be placed in columns as seen above, if you&#8217;d like to use more than one.<\/p>\n\n\n\n<ol>\n<li>To have just one icon alone, simply add the animated icon list block to the page and choose which alignment you&#8217;d like (left, right, or centered).\n<ul>\n<li>In the Page Editor, navigate to the area of the page where you want the block to display.<\/li>\n\n\n\n<li>Click on the Add block icon [+] and select\/search for&nbsp;<strong>Animated Icon<\/strong>&nbsp;from the menu.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>To have two or more aligned next to each other in a row, add the column block to the page, select the number of columns you need, then add the animated icon list block to each column.<\/li>\n\n\n\n<li>When adding the block to the page, use the right-hand menu to select which icon you want to use and add the url you want to link to. Then click on text in the animated icon list block to type the text under the icon and then edit the link text.<\/li>\n\n\n\n<li>Click update in the page editor to save your changes.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>The animated icon block allows you to callout important calls to action by adding animated graphical elements to the page. How to use the animated icon block This block can stand alone or be placed in columns as seen above, if you&#8217;d like to use more than one.<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":567,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animated icon - MarComm Website<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated icon - MarComm Website\" \/>\n<meta property=\"og:description\" content=\"The animated icon block allows you to callout important calls to action by adding animated graphical elements to the page. How to use the animated icon block This block can stand alone or be placed in columns as seen above, if you&#8217;d like to use more than one.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/\" \/>\n<meta property=\"og:site_name\" content=\"MarComm Website\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-07T02:08:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/\",\"name\":\"Animated icon - MarComm Website\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website\"},\"datePublished\":\"2022-05-10T15:41:09+00:00\",\"dateModified\":\"2024-05-07T02:08:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Animated icon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/\",\"name\":\"MarComm Website\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated icon - MarComm Website","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Animated icon - MarComm Website","og_description":"The animated icon block allows you to callout important calls to action by adding animated graphical elements to the page. How to use the animated icon block This block can stand alone or be placed in columns as seen above, if you&#8217;d like to use more than one.","og_url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/","og_site_name":"MarComm Website","article_modified_time":"2024-05-07T02:08:49+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/","url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/","name":"Animated icon - MarComm Website","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website"},"datePublished":"2022-05-10T15:41:09+00:00","dateModified":"2024-05-07T02:08:49+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/animated-icon-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/"},{"@type":"ListItem","position":3,"name":"Animated icon"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/","name":"MarComm Website","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"MarComm Website","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/173"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":9,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/173\/revisions"}],"predecessor-version":[{"id":1111,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/173\/revisions\/1111"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/media?parent=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}