{"id":14846,"date":"2016-06-30T08:17:48","date_gmt":"2016-06-30T15:17:48","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14846"},"modified":"2020-10-26T01:48:35","modified_gmt":"2020-10-26T08:48:35","slug":"the-box-element","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/","title":{"rendered":"The Box Element"},"content":{"rendered":"

The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.<\/p>\n

Border<\/h2>\n

The edge of a box can have a certain thickness, measured in pixels. You can color this border, which technically sits inside of the box element.<\/p>\n

\"Box<\/p>\n

Click the chain icon to give each side a different thickness. That\u2019s useful when simulating a bottom shadow, or making a small box appear to join a larger one as when making tabs. You can also change a box\u2019s corners from sharp points to gentle curves with the corner radius settings.<\/p>\n

\"Boxes<\/p>\n

These options are available to you in the Style menu.<\/p>\n

Fill<\/h2>\n

You can fill the space that a box occupies with a color, gradient, pattern or image. <\/p>\n

When using color, box backgrounds use RGBa \u2014 which includes opacity. That means you can make its background translucent without affecting its border or content.<\/p>\n

Unlike image elements you can import with click-and-drag, images in box backgrounds do not stretch or shrink as you resize the box. If the image is smaller than the box, you can use it as a repeating pattern by selecting \u201crepeat x-axis\u201d and \u201crepeat y-axis.\u201d<\/p>\n

Like borders, you can edit a box\u2019s fill in the Style menu.<\/p>\n

\"Box<\/p>\n

\"Opacity<\/p>\n

Content<\/h2>\n

Boxes can contain text. Double-click a box to start entering words or numbers. This is most useful when creating sitemaps \u2014 though you can also use it to create simple alert and success messages.<\/p>\n

To keep text content from bumping into the border, look in General Settings for \u201cpadding.\u201d<\/p>\n

\"Content<\/p>\n

Coupled with fills and interactions<\/a>, you can create give users some useful messages<\/p>\n

\"Box-based<\/p>\n

Fixed position<\/h2>\n

Like any element, boxes don\u2019t have to move as a user scrolls through long prototypes. Look in General Settings for the \u201cfixed position\u201d checkbox to keep them in place. This is useful when creating headers and footers, especially on mobile apps.<\/p>\n","protected":false},"excerpt":{"rendered":"

While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[184],"tags":[],"class_list":["post-14846","post","type-post","status-publish","format-standard","hentry","category-user-guide"],"yoast_title":"","yoast_metadesc":"The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.","acf":[],"yoast_head":"\nThe Box Element | UXPin<\/title>\n<meta name=\"description\" content=\"The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Box Element\" \/>\n<meta property=\"og:description\" content=\"The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-30T15:17:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-26T08:48:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/box-borders.png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"The Box Element\",\"datePublished\":\"2016-06-30T15:17:48+00:00\",\"dateModified\":\"2020-10-26T08:48:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/\"},\"wordCount\":323,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/box-borders.png\",\"articleSection\":[\"User Guide\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/\",\"name\":\"The Box Element | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/box-borders.png\",\"datePublished\":\"2016-06-30T15:17:48+00:00\",\"dateModified\":\"2020-10-26T08:48:35+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/box-borders.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/box-borders.png\",\"width\":321,\"height\":147,\"caption\":\"box borders\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/the-box-element\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Box Element\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Box Element | UXPin","description":"The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/","og_locale":"en_US","og_type":"article","og_title":"The Box Element","og_description":"The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.","og_url":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/","og_site_name":"Studio by UXPin","article_published_time":"2016-06-30T15:17:48+00:00","article_modified_time":"2020-10-26T08:48:35+00:00","og_image":[{"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/box-borders.png","type":"","width":"","height":""}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"The Box Element","datePublished":"2016-06-30T15:17:48+00:00","dateModified":"2020-10-26T08:48:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/"},"wordCount":323,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/box-borders.png","articleSection":["User Guide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/","url":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/","name":"The Box Element | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/box-borders.png","datePublished":"2016-06-30T15:17:48+00:00","dateModified":"2020-10-26T08:48:35+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"The humble box element doesn\u2019t get much credit. While they make terrific gray placeholders, in UXPin boxes can be more than just dull rectangles.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/box-borders.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/box-borders.png","width":321,"height":147,"caption":"box borders"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/the-box-element\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"The Box Element"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=14846"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14846\/revisions"}],"predecessor-version":[{"id":22956,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14846\/revisions\/22956"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}