{"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":"2022-06-02T18:59:15","modified_gmt":"2022-06-02T18:59:15","slug":"animated-icon-list","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/","title":{"rendered":"Animated icon list"},"content":{"rendered":"\n

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

\n
\n
\n \n \n

First CTA in a column<\/p>

Learn more<\/div><\/div><\/a>\n <\/div>\n <\/div>\n\n\t<\/div>\n\n\n\n
\n
\n \n

Second CTA in a column<\/p>

Explore resources<\/div><\/div><\/a>\n <\/div>\n <\/div>\n\n\t<\/div>\n\n\n\n
\n
\n \n \n

Third CTA in a column<\/p>

Show me more<\/div><\/div><\/a>\n <\/div>\n <\/div>\n\n\t<\/div>\n<\/div>\n\n\n
\n
\n \n

Stand alone CTA with an icon, that is not left or right aligned<\/p>

The text goes all the way across<\/div><\/div><\/a>\n <\/div>\n <\/div>\n\n\t\n\n\n

How to use the animated icon block<\/h2>\n\n\n\n

This block can stand alone or be placed in columns as seen above, if you’d like to use more than one.<\/p>\n\n\n\n

  • To have just one icon alone, simply add the animated icon list block to the page and choose which alignment you’d like (left, right, or centered).<\/li>
  • To have 2 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>
  • 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><\/ul>\n","protected":false},"excerpt":{"rendered":"

    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’d like to use more than one. To have just one icon alone, simply […]<\/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":"\nAnimated icon list - Equity<\/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 list - Equity\" \/>\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’d like to use more than one. To have just one icon alone, simply […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/\" \/>\n<meta property=\"og:site_name\" content=\"Equity\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-02T18:59:15+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\/equity\/blocks\/animated-icon-list\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/\",\"name\":\"Animated icon list - Equity\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website\"},\"datePublished\":\"2022-05-10T15:41:09+00:00\",\"dateModified\":\"2022-06-02T18:59:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Animated icon list\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/\",\"name\":\"Equity\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/equity\/?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 list - Equity","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 list - Equity","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’d like to use more than one. To have just one icon alone, simply […]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/","og_site_name":"Equity","article_modified_time":"2022-06-02T18:59:15+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\/equity\/blocks\/animated-icon-list\/","url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/","name":"Animated icon list - Equity","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website"},"datePublished":"2022-05-10T15:41:09+00:00","dateModified":"2022-06-02T18:59:15+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/animated-icon-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/equity\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/equity\/blocks\/"},{"@type":"ListItem","position":3,"name":"Animated icon list"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/equity\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/equity\/","name":"Equity","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/equity\/?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":"Equity","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/equity","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/173"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":6,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/173\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/173\/revisions\/704"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/equity\/wp-json\/wp\/v2\/media?parent=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}