{"id":232,"date":"2022-12-12T11:25:22","date_gmt":"2022-12-12T19:25:22","guid":{"rendered":"https:\/\/depts.washington.edu\/uwhivishub\/?page_id=232"},"modified":"2023-03-27T23:48:13","modified_gmt":"2023-03-28T06:48:13","slug":"cards","status":"publish","type":"page","link":"https:\/\/depts.washington.edu\/uwhivishub\/theme-features\/cards\/","title":{"rendered":"Cards"},"content":{"rendered":"<p>There are many style options for cards. Please refer to <a href=\"https:\/\/www.washington.edu\/docs\/shortcode-cookbook\/cards\/\" target=\"_blank\" rel=\"noopener\">UW Cookbook website<\/a> to see the complete guidelines for using cards. The examples below show which UW &#8220;color&#8221; style to use for CFAR branding.<\/p>\n<p><em>Style: image-top<\/em><\/p>\n<div  class=\"grid row    \" >\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-left image-top lightgold \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title mb-0\">Color gold<\/h2>\n<div class=\"card-image-top\"><img decoding=\"async\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png\" class=\"card-img card-img-top\" alt=\"Lorem ipsum\"><\/div>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<div class=\"card-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<\/div>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-lg arrow white \"><span>button_text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-left image-top purple \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title mb-0\">Color purple<\/h2>\n<div class=\"card-image-top\"><img decoding=\"async\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png\" class=\"card-img card-img-top\" alt=\"Lorem ipsum\"><\/div>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<div class=\"card-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<\/div>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-lg arrow secondary light-gold \"><span>button_text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-left image-top white \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title mb-0\">Color white<\/h2>\n<div class=\"card-image-top\"><img decoding=\"async\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png\" class=\"card-img card-img-top\" alt=\"Lorem ipsum\"><\/div>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<div class=\"card-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<\/div>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-lg arrow primary purple \"><span>button_text<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><em>Style: inset<\/em><\/p>\n<div  class=\"grid row    \" >\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-center inset lightgold \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title\">Color gold<\/h2>\n<div class=\"card-image-inset\"><img decoding=\"async\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png\" class=\"card-img card-img-inset\" alt=\"Lorem ipsum\"><\/div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-sm white \"><span>button_text<\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-center inset purple \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title\">Color purple<\/h2>\n<div class=\"card-image-inset\"><img decoding=\"async\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png\" class=\"card-img card-img-inset\" alt=\"Lorem ipsum\"><\/div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-sm secondary light-gold \"><span>button_text<\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-center inset white \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title\">Color white<\/h2>\n<div class=\"card-image-inset\"><img decoding=\"async\" src=\"https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png\" class=\"card-img card-img-inset\" alt=\"Lorem ipsum\"><\/div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-sm primary purple \"><span>button_text<\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><em>Style: block<\/em><\/p>\n<div  class=\"grid row    \" >\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-left block-top gold \" style=\"width:100%\">\n<h2 class=\"card-title\">Color gold<\/h2>\n<div class=\"card-body\">\n<div class=\"card-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<div  class=\"card text-left block-top white \" style=\"width:100%\">\n<h2 class=\"card-title\">Color white<\/h2>\n<div class=\"card-body\">\n<div class=\"card-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<\/div>\n<\/div>\n<div  class=\"grid row    \" >\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<em>Style: text-link<\/em><\/p>\n<div  class=\"card text-left white text-button lightgold \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title mb-0\">Lorem ipsum<\/h2>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<div class=\"card-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla hendrerit arcu in dictum.<\/p>\n<\/div>\n<p><a href=\"https:\/\/lipsum.com\/\" class=\"link-arrow-box\"><span>Lorem ipsum<span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<em>Style: step<\/em><\/p>\n<div  class=\"card text-left step white text-button lightgold \" style=\"width:100%\">\n<div class=\"card-body\">\n<h2 class=\"card-title mb-0\">Lorem ipsum<\/h2>\n<div class=\"subtitle\">Step 1<\/div>\n<div class=\"icon ic-check\" aria-hidden=\"true\"><\/div>\n<div class=\"udub-slant-divider\"><span><\/span><\/div>\n<div class=\"card-content\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/p>\n<\/div>\n<p class=\"link-with-arrow-box\"><a href=\"https:\/\/lipsum.com\/\" class=\"link-arrow-box\"><span>Lorem ipsum<span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"col-sm-12 col-md-6 col-lg-4\">\n<\/div>\n<\/div>\n<p><em>Style: large<\/em><\/p>\n<div  class=\"card text-left large lightgold img-left\" style=\"width:100%\">\n<div class=\"image-large\" style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png);\"><\/div>\n<div class=\"card-body\">\n<div class=\"inner-card-body\">\n<h2 class=\"card-title\">Default large card<\/h2>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in scelerisque nulla, condimentum rutrum purus.<\/p>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-lg arrow white\"><span>Go now<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"card text-left large purple img-right\" style=\"width:100%\">\n<div class=\"image-large\" style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png);\"><\/div>\n<div class=\"card-body\">\n<div class=\"inner-card-body\">\n<h2 class=\"card-title\">Color purple, align left<\/h2>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in scelerisque nulla, condimentum rutrum purus.<\/p>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-lg arrow secondary light-gold\"><span>Go now<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div  class=\"card text-left large white img-left\" style=\"width:100%\">\n<div class=\"image-large\" style=\"background-image: url(https:\/\/depts.washington.edu\/uwhivishub\/wordpress\/wp-content\/uploads\/2022\/12\/image-placeholder-4x3-1.png);\"><\/div>\n<div class=\"card-body\">\n<div class=\"inner-card-body\">\n<h2 class=\"card-title\">Color white, align right<\/h2>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in scelerisque nulla, condimentum rutrum purus.<\/p>\n<p class=\"button\"><a href=\"https:\/\/lipsum.com\/\" class=\"btn btn-lg arrow primary purple\"><span>Go now<\/span><span class=\"arrow-box\"><span class=\"arrow\"><\/span><\/span><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><em>Shortcode<\/em><\/p>\n<pre><code>\r\n[uw_card style=\"image-top\" color=\"gold\" title=\"Lorem ipsum\" button=\"button_text\" image=\"\" alt=\"lorem ipsum\" link=\"#\"]Lorem ipsum\u2026[\/uw_card]\r\n[uw_card style=\"image-top\" color=\"purple\" title=\"Lorem ipsum\" button=\"button_text\" image=\"\" alt=\"lorem ipsum\" link=\"#\"]Lorem ipsum\u2026[\/uw_card]\r\n[uw_card style=\"image-top\" color=\"white\" title=\"Lorem ipsum\" button=\"button_text\" image=\"\" alt=\"lorem ipsum\" link=\"#\"]Lorem ipsum\u2026[\/uw_card]\r\n\r\n[uw_card style=\"block\" color=\"gold\" title=\"Color gold\"]Lorem ipsum\u2026[\/uw_card]\r\n[uw_card style=\"block\" color=\"white\" title=\"Color white\"]Lorem ipsum\u2026[\/uw_card]\r\n\r\n[uw_card style=\"text-link\" title=\"Lorem ipsum\" link=\"#\" button=\"button_text\"]Lorem ipsum\u2026[\/uw_card]\r\n[uw_card style=\"step\" title=\"Lorem ipsum\" link=\"#\" button=\"button_text\" subtitle=\"subtitle_text\" icon=\"ic-check\"]Lorem ipsum\u2026[\/uw_card]\r\n\r\n[uw_card style=\"large\" align=\"\" color=\"\" title=\"Default large card\" image=\"#\" alt=\"alt_text\" button=\"button_text\" link=\"#\"]Lorem ipsum\u2026[\/uw_card]\r\n[uw_card style=\"large\" align=\"left\" color=\"purple\" title=\"Default large card\" image=\"#\" alt=\"alt_text\" button=\"button_text\" link=\"#\"]Lorem ipsum\u2026[\/uw_card]\r\n[uw_card style=\"large\" align=\"right\" color=\"white\" title=\"Default large card\" image=\"#\" alt=\"alt_text\" button=\"button_text\" link=\"#\"]Lorem ipsum\u2026[\/uw_card]\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>There are many style options for cards. Please refer to UW Cookbook website to see the complete guidelines for using cards. The examples below show which UW &#8220;color&#8221; style to use for CFAR branding. Style: image-top Style: inset Style: block Style: large Shortcode Lorem ipsum Lorem ipsum\u2026 button_text Lorem ipsum Lorem ipsum\u2026 button_text Lorem ipsum Lorem ipsum\u2026 button_text Color gold Lorem ipsum\u2026 Color white Lorem ipsum\u2026 Lorem ipsum Lorem ipsum\u2026 button_text Lorem ipsum subtitle_text Lorem ipsum\u2026 button_text Default large card&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":80,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"templates\/template-no-hero.php","meta":{"footnotes":""},"class_list":["post-232","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/comments?post=232"}],"version-history":[{"count":27,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/232\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/232\/revisions\/515"}],"up":[{"embeddable":true,"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/pages\/80"}],"wp:attachment":[{"href":"https:\/\/depts.washington.edu\/uwhivishub\/wp-json\/wp\/v2\/media?parent=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}