2023-12-18 10:59:02 +00:00
<!doctype html>
< html lang = "en" dir = "ltr" class = "docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-visual-language/grid-and-layout/non-web-environment" >
< head >
< meta charset = "UTF-8" >
< meta name = "generator" content = "Docusaurus v2.4.1" >
< title data-rh = "true" > Non-web Environment | Nomos< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://guide.nomos.tech/visual-language/grid-and-layout/non-web-environment" > < meta data-rh = "true" name = "docusaurus_locale" content = "en" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "keywords" content = "Nomos" > < meta data-rh = "true" name = "image" content = "https://guide.nomos.tech/_og/50eb074f1ab1e7b5ba8323ecc2b7b66ad4265984.png" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Non-web Environment | Nomos" > < meta data-rh = "true" name = "description" content = "Non-web grids are based on a 20px unit. All elements are sized and spaced in multiples of 20, though which multiples depends on the particular medium. Below we have examples of grids for podcast promotion, podcast video, and 169 @1920x1080, 116 @1080x1920. They can also work for print in 13, 1:1, and other aspect ratios." > < meta data-rh = "true" property = "og:description" content = "Non-web grids are based on a 20px unit. All elements are sized and spaced in multiples of 20, though which multiples depends on the particular medium. Below we have examples of grids for podcast promotion, podcast video, and 169 @1920x1080, 116 @1080x1920. They can also work for print in 13, 1:1, and other aspect ratios." > < link data-rh = "true" rel = "icon" href = "/theme/image/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://guide.nomos.tech/visual-language/grid-and-layout/non-web-environment" > < link data-rh = "true" rel = "alternate" href = "https://guide.nomos.tech/visual-language/grid-and-layout/non-web-environment" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://guide.nomos.tech/visual-language/grid-and-layout/non-web-environment" hreflang = "x-default" > < link rel = "alternate icon" type = "image/png" href = "/theme/image/favicon.png" >
< link rel = "icon" type = "image/svg+xml" href = "/theme/image/favicon.svg" > < link rel = "stylesheet" href = "/assets/css/styles.34f74618.css" >
2023-12-19 14:36:07 +00:00
< link rel = "preload" href = "/assets/js/runtime~main.17711e4a.js" as = "script" >
< link rel = "preload" href = "/assets/js/main.a90a5022.js" as = "script" >
2023-12-18 10:59:02 +00:00
< meta property = "og:image" content = "https://guide.nomos.tech/_og/50eb074f1ab1e7b5ba8323ecc2b7b66ad4265984.png" > < meta name = "twitter:image" content = "https://guide.nomos.tech/_og/50eb074f1ab1e7b5ba8323ecc2b7b66ad4265984.png" > < / head >
< body class = "navigation-with-keyboard" >
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { var t = null ; try { t = new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } return t } ( ) || function ( ) { var t = null ; try { t = localStorage . getItem ( "theme" ) } catch ( t ) { } return t } ( ) ; t ( null !== e ? e : "dark" ) } ( ) < / script > < div id = "__docusaurus" >
< style data-emotion = "css-global 1vx64ch" > . lsd-button { width : auto ; cursor : pointer ; padding : 6 px 24 px ; } . lsd-button--disabled { cursor : default ; opacity : 0.34 ; } . lsd-button--large { padding : 10 px 40 px ; } . lsd-button--medium { padding : 6 px 24 px ; } . lsd-button--small { padding : 6 px 12 px ; } . lsd-button : hover : not ( . lsd-button--disabled ) . lsd-button__text { -webkit- text-decoration : underline ; text-decoration : underline ; } . lsd-button--with-icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; } . lsd-button__icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; height : 100 % ; } . lsd-button--large . lsd-button--with-icon { padding : 10 px 0 px 10 px 18 px ; } . lsd-button--large . lsd-button--with-icon . lsd-button__icon { width : 42 px ; } . lsd-button--medium . lsd-button--with-icon { padding : 6 px 0 px 6 px 14 px ; } . lsd-button--medium . lsd-button--with-icon . lsd-button__icon { width : 38 px ; } . lsd-button--small . lsd-button--with-icon { padding : 6 px 0 px 6 px 12 px ; } . lsd-button--small . lsd-button--with-icon . lsd-button__icon { width : 34 px ; } . lsd-button--outlined { background : none ; color : rgb ( var ( - - lsd - text - primary ) ) ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-button--filled { background : rgb ( var ( - - lsd - surface - secondary ) ) ; color : rgb ( var ( - - lsd - text - secondary ) ) ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } < / style > < style data-emotion = "css-global 10bahxd" > . lsd-icon-button { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; cursor : pointer ; background : none ; padding : 0 ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-icon-button--filled { background-color : rgb ( var ( - - lsd - icon - primary ) ) ; } . lsd-icon-button--filled svg { --lsd-icon-primary : var ( - - lsd - icon - secondary ) ; } . lsd-icon-button--disabled { opacity : 0.34 ; cursor : default ; } . lsd-icon-button--large { width : 40 px ; height : 40 px ; } . lsd-icon-button--medium { width : 32 px ; height : 32 px ; } . lsd-icon-button--small { width : 28 px ; height : 28 px ; } < / style > < style data-emotion = "css-global icqph9" > . lsd-icon-button-group { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; } . lsd-icon-button-group--outlined . lsd-icon-button : not ( : last-child ) { border-right : none ; } < / style > < style data-emotion = "css-global 1vdncft" > b o d y * { f o n t - f a m i l y : v a r ( - - l s d - t y p o g r a p h y - g e n e r i c - f o n t - f a m i l y ) ; } . l s d - t y p o g r a p h y - - p r i m a r y { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; } . l s d - t y p o g r a p h y - - s e c o n d a r y { c o l o r : r g b ( v a r ( - - l s d - t e x t - s e c o n d a r y ) ) ; } . l s d - t y p o g r a p h y - - s a n s - s e r i f , . l s d - t y p o g r a p h y - - s a n s - s e r i f * { f o n t - f a m i l y : s a n s - s e r i f ; } . l s d - t y p o g r a p h y - - s e r i f , . l s d - t y p o g r a p h y - - s e r i f * { f o n t - f a m i l y : s e r i f ; } . l s d - t y p o g r a p h y - - m o n o s p a c e , . l s d - t y p o g r a p h y - - m o n o s p a c e * { f o n t - f a m i l y : m o n o s p a c e ; } . l s d - t y p o g r a p h y - - d i s p l a y 1 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - d i s p l a y 1 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d - d i s p l a y 1 - f o n t S i z e ) ; l i n e - h e i g h t : v a r ( - - l s d - d i s p l a y 1 - l i n e H e i g h t ) ; } . l s d - t y p o g r a p h y - - d i s p l a y 2 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - d i s p l a y 2 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d - d i s p l a y 2 - f o n t S i z e ) ; l i n e - h e i g h t : v a r ( - - l s d - d i s p l a y 2 - l i n e H e i g h t ) ; } h 1 , . l s d - t y p o g r a p h y - - h 1 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - h 1 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d - h 1 - f o n t S i z e ) ; l i n e - h e i g h t : v a r ( - - l s d - h 1 - l i n e H e i g h t ) ; } h 2 , . l s d - t y p o g r a p h y - - h 2 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - h 2 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d - h 2 - f o n t S i z e ) ; l i n e - h e i g h t : v a r ( - - l s d - h 2 - l i n e H e i g h t ) ; } h 3 , . l s d - t y p o g r a p h y - - h 3 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - h 3 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d - h 3 - f o n t S i z e ) ; l i n e - h e i g h t : v a r ( - - l s d - h 3 - l i n e H e i g h t ) ; } h 4 , . l s d - t y p o g r a p h y - - h 4 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r
.lsd-dropdown--error
) .lsd-dropdown__trigger:hover .lsd-dropdown__option-label,.lsd-dropdown:not(.lsd-dropdown--disabled):not(
.lsd-dropdown--error
) .lsd-dropdown__trigger:focus .lsd-dropdown__option-label{-webkit-text-decoration:underline;text-decoration:underline;}.lsd-dropdown__label{display:block;}.lsd-dropdown__button-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}.lsd-dropdown__trigger{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;border:none;cursor:pointer;background:none;}.lsd-dropdown__trigger:focus{outline:none;}.lsd-dropdown__option-label{cursor:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.lsd-dropdown__icons{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:8px;}.lsd-dropdown__icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.lsd-dropdown__supporting-text{margin:6px 14px;}.lsd-dropdown--error .lsd-dropdown__option-label{-webkit-text-decoration:line-through;text-decoration:line-through;}.lsd-dropdown--disabled{opacity:0.34;cursor:initial;}.lsd-dropdown--large{width:208px;}.lsd-dropdown--large.lsd-dropdown--error{width:230px;}.lsd-dropdown--large .lsd-dropdown__label{margin:0 0 6px 18px;}.lsd-dropdown--large .lsd-dropdown__button-container{height:40px;}.lsd-dropdown--large .lsd-dropdown__trigger{padding:10px 0px 10px 18px;}.lsd-dropdown--large .lsd-dropdown__icons{padding:0px 14px;}.lsd-dropdown--medium{width:188px;}.lsd-dropdown--medium.lsd-dropdown--error{width:210px;}.lsd-dropdown--medium .lsd-dropdown__label{margin:0 0 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__button-container{height:32px;}.lsd-dropdown--medium .lsd-dropdown__trigger{padding:6px 0px 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__icons{padding:0px 12px;}.lsd-dropdown--small{width:164px;}.lsd-dropdown--small.lsd-dropdown--error{width:186px;}.lsd-dropdown--small .lsd-dropdown__label{margin:0 0 6px 12px;}.lsd-dropdown--small .lsd-dropdown__button-container{height:28px;}.lsd-dropdown--small .lsd-dropdown__trigger{padding:6px 0px 6px 12px;}.lsd-dropdown--small .lsd-dropdown__icons{padding:0px 10px;}.lsd-dropdown--outlined .lsd-dropdown__button-container{border:1px solid rgb(var(--lsd-border-primary));}.lsd-dropdown--underlined .lsd-dropdown__button-container{border:1px solid transparent;border-bottom:1px solid rgb(var(--lsd-border-primary));}< / style > < style data-emotion = "css-global w2g5fy" > . l s d - d r o p d o w n - i t e m { w i d t h : 1 0 0 % ; b o x - s i z i n g : b o r d e r - b o x ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - f l e x - d i r e c t i o n : r o w ; - m s - f l e x - d i r e c t i o n : r o w ; f l e x - d i r e c t i o n : r o w ; - w e b k i t - a l i g n - i t e m s : c e n t e r ; - w e b k i t - b o x - a l i g n : c e n t e r ; - m s - f l e x - a l i g n : c e n t e r ; a l i g n - i t e m s : c e n t e r ; b o r d e r : 1 p x s o l i d r g b ( v a r ( - - l s d - b o r d e r - p r i m a r y ) ) ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) { c u r s o r : p o i n t e r ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s { o u t l i n e : n o n e ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r . l s d - d r o p d o w n - i t e m _ _ l a b e l , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s . l s d - d r o p d o w n - i t e m _ _ l a b e l { - w e b k i t - t e x t - d e c o r a t i o n : u n d e r l i n e ; t e x t - d e c o r a t i o n : u n d e r l i n e ; } . l s d - d r o p d o w n - i t e m _ _ l a b e l { d i s p l a y : b l o c k ; o v e r f l o w : h i d d e n ; w h i t e - s p a c e : n o w r a p ; t e x t - o v e r f l o w : e l l i p s i s ; } . l s d - d r o p d o w n - i t e m - - d i s a b l e d { o p a c i t y : 0 . 3 4 ; } . l s d - d r o p d o w n - i t e m _ _ i c o n { m a r g i n - r i g h t : 1 8 p x ; - w e b k i t - f l e x - s h r i n k : 0 ; - m s - f l e x - n e g a t i v e : 0 ; f l e x - s h r i n k : 0 ; } . l s d - d r o p d o w n - i t e m - - s m a l l { p a d d i n g : 5 p x 9 p x ; h e i g h t : 2 8 p x ; } . l
2023-12-19 14:36:07 +00:00
< script src = "/assets/js/runtime~main.17711e4a.js" > < / script >
< script src = "/assets/js/main.a90a5022.js" > < / script >
2023-12-18 10:59:02 +00:00
< / body >
< / html >
