Conversation
|
With that header, having a vertical header makes more sense. If you want a horizontal header, the icon and words should be on the same row. Are you going to clean up the code and extract stuff out of |
|
I like layout 2. Also, how does it look like on mobile (assuming this is responsive layout) |
| yarn-debug.log* | ||
| yarn-error.log* | ||
|
|
||
| /.idea No newline at end of file |
| @@ -0,0 +1 @@ | |||
| <svg id="Capa_1" enable-background="new 0 0 511.916 511.916" height="512" viewBox="0 0 511.916 511.916" width="512" xmlns="http://www.w3.org/2000/svg"><g id="XMLID_948_"><g id="XMLID_1127_"><path id="XMLID_1196_" d="m498.058 122.881c-2.377-4.984-8.343-7.098-13.331-4.722-4.984 2.377-7.099 8.346-4.722 13.331 22.342 46.85 12.68 103-24.044 139.723l-15.816 15.816c-6.382-2.827-13.103-4.873-19.988-6.095 8.536-9.683 13.731-22.378 13.731-36.271v-19.966c0-30.285-24.64-54.924-54.925-54.924s-54.924 24.639-54.924 54.924v19.966c0 13.896 5.198 26.595 13.738 36.279-13.924 2.481-26.888 8.312-37.856 16.78-4.461-20.114-22.429-35.206-43.866-35.206-21.421 0-39.378 15.069-43.857 35.16-10.955-8.458-23.915-14.27-37.86-16.742 8.537-9.683 13.732-22.379 13.732-36.272v-19.966c0-30.285-24.639-54.924-54.924-54.924s-54.924 24.639-54.924 54.924v19.966c0 13.892 5.195 26.587 13.73 36.27-6.946 1.232-13.726 3.304-20.157 6.169l-15.89-15.89c-23.197-23.196-35.972-54.038-35.972-86.842s12.774-63.646 35.972-86.842c23.196-23.196 54.037-35.971 86.842-35.971s63.646 12.775 86.842 35.971l19.273 19.274c3.906 3.905 10.236 3.905 14.143 0l19.273-19.274c36.724-36.724 92.875-46.386 139.726-24.042 4.984 2.376 10.953.264 13.331-4.721 2.377-4.985.264-10.953-4.722-13.331-54.481-25.984-119.775-14.75-162.478 27.952l-12.202 12.203-12.202-12.203c-26.974-26.974-62.837-41.829-100.984-41.829-38.146 0-74.01 14.855-100.984 41.829-55.683 55.683-55.683 146.286 0 201.969l164.379 164.378c13.3 13.3 30.983 20.625 49.792 20.625s36.492-7.325 49.792-20.625l164.379-164.379c42.7-42.698 53.933-107.992 27.953-162.472zm-154.019 101.817c0-19.257 15.667-34.924 34.924-34.924 19.258 0 34.925 15.667 34.925 34.924v19.966c0 19.257-15.667 34.924-34.925 34.924-19.257 0-34.924-15.667-34.924-34.924zm8.901 74.89h52.047c6.676 0 13.309 1.012 19.644 2.956l-92.773 92.774c-4.5-23.702-19.839-43.599-40.655-54.338 10.211-24.884 34.623-41.392 61.737-41.392zm-96.885-17.071c13.752 0 24.94 11.188 24.94 24.941s-11.188 24.941-24.94 24.941c-13.753 0-24.941-11.188-24.941-24.941s11.188-24.941 24.941-24.941zm-157.833-57.819c0-19.257 15.667-34.924 34.924-34.924s34.924 15.667 34.924 34.924v19.966c0 19.257-15.667 34.924-34.924 34.924s-34.924-15.667-34.924-34.924zm8.9 74.89h52.047c27.143 0 51.414 16.406 61.666 41.224-20.943 10.678-36.403 30.604-40.959 54.372l-92.585-92.585c6.392-1.982 13.092-3.011 19.831-3.011zm184.46 136.004c-9.522 9.522-22.183 14.767-35.649 14.767s-26.127-5.244-35.649-14.767l-21.807-21.807v-4.008c0-31.638 25.739-57.377 57.378-57.377 31.638 0 57.377 25.739 57.377 57.377v4.166z"/><path id="XMLID_1246_" d="m463.032 100.458c2.63 0 5.21-1.07 7.07-2.93 1.859-1.86 2.93-4.44 2.93-7.07s-1.07-5.21-2.93-7.07-4.44-2.93-7.07-2.93-5.21 1.07-7.07 2.93c-1.859 1.86-2.93 4.44-2.93 7.07s1.07 5.21 2.93 7.07c1.861 1.86 4.441 2.93 7.07 2.93z"/></g></g></svg> No newline at end of file | |||
There was a problem hiding this comment.
newline + line breaks (just run format on this file)
| @@ -0,0 +1 @@ | |||
| <svg id="Layer_1" enable-background="new 0 0 512.002 512.002" height="512" viewBox="0 0 512.002 512.002" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m356.001 307.004h-90v-22.792c4.346.9 8.733 1.348 13.101 1.348 16.984 0 33.616-6.675 45.89-18.949 16.292-16.293 22.717-40.257 16.767-62.542-.923-3.458-3.624-6.158-7.082-7.082-22.282-5.951-46.249.475-62.541 16.767-2.235 2.235-4.277 4.619-6.135 7.119v-41.433c44.937-4.991 80-43.196 80-89.441 0-49.626-40.374-90-90-90s-90 40.374-90 90c0 46.246 35.063 84.451 80 89.441v41.433c-1.857-2.5-3.899-4.884-6.134-7.119-16.293-16.292-40.257-22.718-62.542-16.767-3.458.923-6.158 3.624-7.082 7.082-5.95 22.284.475 46.248 16.767 62.541 12.275 12.275 28.905 18.949 45.891 18.949 4.366 0 8.755-.448 13.101-1.348v22.792h-90c-11.028 0-20 8.972-20 20v25c0 7.861 4.57 14.657 11.183 17.924l18.953 113.718c2.827 16.96 14.828 28.356 29.864 28.356h120c15.036 0 27.038-11.396 29.863-28.355l18.954-113.719c6.613-3.267 11.182-10.063 11.182-17.924v-25c0-11.027-8.972-19.999-20-19.999zm-69.723-79.106c9.829-9.829 23.704-14.458 37.316-12.745 1.717 13.616-2.916 27.487-12.745 37.316-9.829 9.828-23.702 14.458-37.316 12.744-1.716-13.614 2.916-27.486 12.745-37.315zm-47.809 37.316c-13.617 1.715-27.488-2.916-37.316-12.744-9.829-9.829-14.461-23.701-12.745-37.316 13.613-1.717 27.487 2.916 37.316 12.745 9.829 9.828 14.462 23.7 12.745 37.315zm-52.468-175.214c0-38.598 31.402-70 70-70s70 31.402 70 70-31.402 70-70 70-70-31.402-70-70zm140.135 390.359c-.895 5.371-4.086 11.643-10.135 11.643h-120c-6.049 0-9.241-6.272-10.136-11.644l-18.06-108.354h43.193c5.523 0 10-4.477 10-10s-4.477-10-10-10h-54.997v-25h200v25h-55.003c-5.523 0-10 4.477-10 10s4.477 10 10 10h43.199z"/><path d="m291.356 120.358c3.905-3.905 3.906-10.237 0-14.142-3.904-3.905-10.237-3.905-14.142 0-5.667 5.666-13.2 8.787-21.213 8.787s-15.547-3.121-21.214-8.787c-3.905-3.905-10.237-3.905-14.142 0s-3.905 10.237 0 14.142c9.444 9.443 22 14.644 35.355 14.644 13.356 0 25.913-5.2 35.356-14.644z"/><path d="m226 85.002c5.523 0 10-4.481 10-10.004s-4.477-10-10-10-10 4.477-10 10v.007c0 5.524 4.477 9.997 10 9.997z"/><path d="m286.002 85.002c5.523 0 10-4.481 10-10.004s-4.477-10-10-10-10 4.477-10 10v.007c0 5.524 4.477 9.997 10 9.997z"/><path d="m256.001 352.004h-.008c-5.523 0-9.996 4.477-9.996 10s4.481 10 10.004 10 10-4.477 10-10-4.477-10-10-10z"/></g></g></svg> No newline at end of file | |||
There was a problem hiding this comment.
newline + line breaks (just run format on this file)
| @@ -0,0 +1 @@ | |||
| <svg id="OutlineExpand" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m57 25.59 1.315.893c.167.113.362.173.562.173.062 0 .126-.006.188-.018.26-.05.49-.201.639-.421l2.246-3.311c.311-.457.191-1.079-.266-1.389l-29.122-19.761c-.34-.23-.783-.23-1.123 0l-29.124 19.762c-.457.31-.576.932-.266 1.389l2.246 3.311c.148.22.379.371.639.421.262.05.531-.007.75-.155l1.316-.894v10.005c-.586.256-1.065.729-1.316 1.351-1.681 4.156-3.684 9.618-3.684 12.054 0 3.59 2.09 6.378 5 6.903v4.097h-5v2h60v-2h-5zm-51.611-1.323-1.123-1.657 27.734-18.819 27.734 18.819-1.123 1.656-26.049-17.676c-.17-.115-.366-.173-.562-.173s-.392.058-.562.173zm-1.389 24.733c0-1.625 1.289-5.745 3.537-11.304.115-.283.362-.313.463-.313s.348.03.463.313c2.248 5.559 3.537 9.679 3.537 11.304 0 2.897-1.683 5-4 5s-4-2.103-4-5zm5 6.903c2.91-.525 5-3.313 5-6.903 0-2.436-2.003-7.898-3.684-12.054-.251-.622-.73-1.095-1.316-1.351v-11.362l23-15.607 23 15.607v19.465l-.168-.252c-.371-.557-1.293-.557-1.664 0l-2 3c-.109.163-.168.357-.168.554v2h-2v-2c0-.197-.059-.391-.168-.555l-2-3c-.371-.557-1.293-.557-1.664 0l-2 3c-.109.164-.168.358-.168.555v2h-2v-2c0-.197-.059-.391-.168-.555l-2-3c-.371-.557-1.293-.557-1.664 0l-2 3c-.109.164-.168.358-.168.555v13h-6v-19c0-.553-.447-1-1-1h-11c-.553 0-1 .447-1 1v19h-7zm30 4.097h-2v-12.697l1-1.5 1 1.5zm2-9h2v2h-2zm0 4h2v5h-2zm6 5h-2v-12.697l1-1.5 1 1.5zm2-9h2v2h-2zm0 4h2v5h-2zm-22 5h-9v-18h9zm26 0v-12.697l1-1.5 1 1.5v12.697z"/><path d="m29 33h6c2.206 0 4-1.794 4-4v-6c0-2.206-1.794-4-4-4h-6c-2.206 0-4 1.794-4 4v6c0 2.206 1.794 4 4 4zm-2-4v-2h4v4h-2c-1.103 0-2-.897-2-2zm8 2h-2v-4h4v2c0 1.103-.897 2-2 2zm2-8v2h-4v-4h2c1.103 0 2 .897 2 2zm-8-2h2v4h-4v-2c0-1.103.897-2 2-2z"/><path d="m23 50h2v2h-2z"/></svg> No newline at end of file | |||
There was a problem hiding this comment.
newline + line breaks (just run format on this file)
| @@ -0,0 +1 @@ | |||
| <svg height="414pt" viewBox="-32 0 414 414.91794" width="414pt" xmlns="http://www.w3.org/2000/svg"><path d="m210.351562 82.03125 58.949219 81.085938 23.621094-46.753907-52.925781-52.925781zm0 0" fill="#feda38"/><path d="m269.300781 169.945312c-2.171875 0-4.234375-1.039062-5.519531-2.8125l-58.945312-81.085937c-1.113282-1.53125-1.542969-3.453125-1.179688-5.308594.351562-1.859375 1.464844-3.484375 3.070312-4.484375l29.640626-18.597656c2.695312-1.699219 6.195312-1.304688 8.453124.957031l52.929688 52.925781c2.085938 2.085938 2.59375 5.273438 1.265625 7.90625l-23.621094 46.753907c-1.074219 2.121093-3.171875 3.535156-5.546875 3.726562-.179687.011719-.367187.019531-.546875.019531zm-49.128906-86.015624 48.074219 66.128906 16.355468-32.363282-45.589843-45.585937zm0 0" fill="#231f20"/><path d="m239.996094 63.4375 52.925781 52.925781 16.144531-31.960937-39.507812-39.507813zm0 0" fill="#feda38"/><path d="m292.921875 123.191406c-1.796875 0-3.542969-.707031-4.828125-2l-52.925781-52.925781c-1.472657-1.464844-2.195313-3.527344-1.960938-5.59375.242188-2.066406 1.398438-3.914063 3.160157-5.011719l29.566406-18.546875c2.6875-1.699219 6.207031-1.300781 8.453125.953125l39.507812 39.515625c2.085938 2.085938 2.59375 5.273438 1.265625 7.90625l-16.148437 31.960938c-.984375 1.953125-2.851563 3.3125-5.011719 3.660156-.359375.054687-.71875.082031-1.078125.082031zm-42.042969-58.519531 40.203125 40.199219 9.664063-19.132813-32.167969-32.175781zm0 0" fill="#231f20"/><path d="m299.121094 26.351562-29.5625 18.542969 39.507812 39.507813 16.144532-31.960938zm0 0" fill="#feda38"/><path d="m309.066406 91.230469c-1.792968 0-3.539062-.707031-4.824218-2l-39.507813-39.511719c-1.472656-1.464844-2.191406-3.527344-1.960937-5.59375.242187-2.066406 1.402343-3.914062 3.164062-5.011719l29.558594-18.542969c2.691406-1.699218 6.199218-1.3125 8.453125.957032l26.09375 26.085937c2.085937 2.085938 2.59375 5.273438 1.265625 7.90625l-16.148438 31.964844c-.984375 1.957031-2.851562 3.3125-5.011718 3.660156-.359376.058594-.722657.085938-1.082032.085938zm-28.617187-45.105469 26.777343 26.785156 9.667969-19.140625-18.753906-18.746093zm0 0" fill="#231f20"/><path d="m341.324219 20.542969c4.308593-8.527344-5.335938-17.316407-13.425781-12.242188l-28.777344 18.046875 26.089844 26.089844zm0 0" fill="#feda38"/><path d="m325.214844 59.265625c-1.792969 0-3.535156-.707031-4.828125-2l-26.09375-26.089844c-1.464844-1.464843-2.191407-3.523437-1.957031-5.589843.234374-2.066407 1.398437-3.914063 3.160156-5.015626l28.773437-18.046874c6.238281-3.917969 14.132813-3.226563 19.589844 1.753906 5.460937 4.972656 6.894531 12.746094 3.5625 19.347656l-16.113281 31.894531c-.988282 1.953125-2.855469 3.3125-5.015625 3.660157-.359375.058593-.71875.085937-1.078125.085937zm-15.207032-31.679687 13.367188 13.359374 11.859375-23.480468c.773437-1.53125-.027344-2.601563-.574219-3.101563-.660156-.605469-1.746094-1.160156-3.140625-.277343zm31.320313-7.042969h.066406zm0 0" fill="#231f20"/><path d="m86.679688 84.964844s-106.902344 25.59375-26.726563 113.789062zm0 0" fill="#f97da3"/><path d="m59.953125 205.578125c-1.898437 0-3.738281-.792969-5.054687-2.234375-26.503907-29.152344-36.410157-55.40625-29.4375-78.011719 10.765624-34.933593 57.636718-46.527343 59.632812-47.007812 2.316406-.554688 4.726562.132812 6.40625 1.800781 1.671875 1.671875 2.367188 4.09375 1.824219 6.398438l-26.726563 113.789062c-.578125 2.464844-2.476562 4.414062-4.933594 5.046875-.5625.144531-1.136718.21875-1.710937.21875zm17.292969-110.320313c-12.867188 5.058594-33.101563 15.714844-38.753906 34.132813-4.679688 15.257813 1.339843 33.605469 17.90625 54.640625zm0 0" fill="#231f20"/><path d="m66.78125 143.757812s-106.902344 25.597657-26.726562 113.789063zm0 0" fill="#26bbec"/><path d="m40.054688 264.378906c-1.902344 0-3.742188-.792968-5.054688-2.234375-26.5-29.160156-36.40625-55.40625-29.441406-78.019531 10.769531-34.933594 57.640625-46.527344 59.632812-47.007812 2.3125-.546876 4.730469.132812 6.402344 1.800781 1.679688 1.671875 2.375 4.09375 1.832031 6.398437l-26.726562 113.792969c-.582031 2.46875-2.480469 4.414063-4.933594 5.046875-.566406.148438-1.136719.222656-1.710937.222656zm17.292968-110.320312c-12.867187 5.050781-33.101562 15.710937-38.746094 34.125-4.6875 15.265625 1.332032 33.613281 17.898438 54.648437zm0 0" fill="#231f20"/><path d="m55.832031 202.554688s-109.226562 60.171874 0 120.347656zm0 0" fill="#ee5281"/><path d="m55.832031 329.730469c-1.132812 0-2.265625-.277344-3.292969-.84375-34.558593-19.042969-52.082031-40.550781-52.082031-63.929688 0-39.238281 49.957031-67.207031 52.082031-68.378906 2.113282-1.160156 4.679688-1.117187 6.765626.101563 2.082031 1.234374 3.355468 3.464843 3.355468 5.878906v120.347656c0 2.414062-1.273437 4.648438-3.355468 5.878906-1.070313.625-2.269532.945313-3.472657.945313zm-6.824219-114.644531c-13.28125 9.453124-34.90625 28.1875-34.894531 49.898437.015625 15.851563 11.742188 31.285156 34.894531 45.972656zm0 0" fill="#231f20"/><path d="m53.882812 281.601562s-69.085937 80.675782 44.757813 115.964844zm0 0" fill="#288eea"/><path d="m98.640625 404.390625c-.675781 0-1.355469-.101563-2.019531-.304687-38.179688-11.835938-61.09375-30.140626-68.101563-54.414063-10.445312-36.195313 18.925781-71.046875 20.179688-72.515625 1.566406-1.816406 3.945312-2.683594 6.339843-2.285156 2.367188.40625 4.355469 2.027344 5.214844 4.265625l44.753906 115.96875c.945313 2.445312.40625 5.207031-1.378906 7.117187-1.3125 1.40625-3.128906 2.167969-4.988281 2.167969zm-46.527344-108.421875c-6.980469 11.410156-15.964843 31-10.457031 49.972656 4.851562 16.714844 20.066406 30.226563 45.292969 40.28125zm0 0" fill="#231f20"/><path d="m256.082031 312.425781c7.992188-.589843 86.988281 6.589844 86.988281-75.367187 0-40.835938-33.019531-73.941406-73.855468-73.941406 0 0 1.824218-87.300782-115.765625-92.648438 0 0-29.375-42.757812-74.808594-37.414062 0 0-26.261719 21.382812.464844 77.503906 0 0-71.058594 155.023437 24.515625 297.53125h238.933594v-6.78125c0-15.589844-8.742188-30.050782-22.828126-36.726563-16.429687-7.785156-39.816406-22.96875-63.644531-52.15625zm0 0" fill="#fff"/><g fill="#231f20"><path d="m342.554688 414.917969h-238.933594c-2.273438 0-4.402344-1.132813-5.667969-3.027344-89.285156-133.128906-35.53125-278.707031-26.320313-301.199219-26.5-58.234375 1.472657-81.933594 2.695313-82.925781 1.003906-.820313 2.226563-1.335937 3.511719-1.488281 42.5-5.019532 71.375 27.558594 79.167968 37.546875 100.371094 5.925781 116.128907 71.328125 118.578126 92.714843 41.519531 3.265626 74.308593 38.132813 74.308593 80.519532 0 25.207031-7.128906 45.105468-21.179687 59.132812-17.695313 17.660156-42.242188 21.785156-57.945313 22.738282 20.011719 21.621093 38.863281 33.320312 51.878907 39.488281 16.238281 7.6875 26.730468 24.527343 26.730468 42.894531v6.777344c0 3.773437-3.050781 6.828125-6.824218 6.828125zm-235.265626-13.652344h228.441407c-.023438-13.101563-7.441407-25.074219-18.921875-30.515625-16.3125-7.726562-41-23.363281-66.015625-54.007812-1.609375-1.972657-1.992188-4.679688-.984375-7.019532 1.007812-2.339844 3.234375-3.917968 5.773437-4.105468.734375-.050782 1.957031-.046876 3.660157-.058594 10.1875.007812 40.6875.074218 59.828124-19.03125 11.394532-11.375 17.171876-28.015625 17.171876-49.46875 0-37.007813-30.066407-67.113282-67.027344-67.113282-1.832032 0-3.589844-.738281-4.878906-2.050781-1.277344-1.308593-1.984376-3.082031-1.945313-4.914062.046875-3.273438-.0625-80.722657-109.253906-85.6875-2.128907-.101563-4.09375-1.191407-5.308594-2.945313-.273437-.382812-26.566406-37.707031-66.097656-34.734375-4.289063 4.945313-17.074219 24.71875 3.539062 68.011719.867188 1.820312.882813 3.941406.039063 5.773438-.6875 1.507812-67.273438 151.132812 21.980468 287.867187zm0 0"/><path d="m187.339844 207.476562c-19.972656 0-36.21875-16.246093-36.21875-36.21875 0-3.773437 3.050781-6.828124 6.824218-6.828124 3.773438 0 6.828126 3.054687 6.828126 6.828124 0 12.4375 10.128906 22.566407 22.566406 22.566407 12.449218 0 22.574218-10.128907 22.574218-22.566407 0-3.773437 3.054688-6.828124 6.828126-6.828124 3.773437 0 6.824218 3.054687 6.824218 6.828124 0 19.972657-16.253906 36.21875-36.226562 36.21875zm0 0"/><path d="m128.546875 91.792969c-2.785156 0-5.40625-1.722657-6.414063-4.496094-3.386718-9.304687-7.925781-15.199219-13.5-17.519531-5.730468-2.386719-11.019531-.167969-11.070312-.148438-3.414062 1.601563-7.472656.101563-9.0625-3.324218-1.585938-3.421876-.09375-7.480469 3.328125-9.0625 1.074219-.503907 10.824219-4.726563 22.050781-.074219 9.242188 3.847656 16.335938 12.414062 21.082032 25.460937 1.292968 3.539063-.53125 7.460938-4.082032 8.746094-.765625.285156-1.558594.417969-2.332031.417969zm0 0"/></g></svg> No newline at end of file | |||
There was a problem hiding this comment.
newline + line breaks (just run format on this file)
| </div> | ||
| <div className="columns"> | ||
| {/*<div className="column is-hidden-mobile"/>*/} | ||
| {HomepageTile("family", "Family", "", "yellow")} |
There was a problem hiding this comment.
| {HomepageTile("family", "Family", "", "yellow")} | |
| <HomepageTile icon="family" label="Family" link="" color="yellow" /> |
| <div className="columns"> | ||
| {/*<div className="column is-hidden-mobile"/>*/} | ||
| {HomepageTile("family", "Family", "", "yellow")} | ||
| {HomepageTile("sunbed", "Luxury", "", "blue-two")} |
There was a problem hiding this comment.
| {HomepageTile("sunbed", "Luxury", "", "blue-two")} | |
| <HomepageTile icon="sunbed" label="Luxury" link="" color="blue-two" /> |
| <div className="container"> | ||
| <div className="columns"> | ||
| {/*<div className="column is-hidden-mobile"/>*/} | ||
| {HomepageTile("home", "Housing", "", "blue-one")} |
There was a problem hiding this comment.
| {HomepageTile("home", "Housing", "", "blue-one")} | |
| <HomepageTile icon="home" label="Housing" link="" color="blue-one" /> |
| <div className="columns"> | ||
| {/*<div className="column is-hidden-mobile"/>*/} | ||
| {HomepageTile("home", "Housing", "", "blue-one")} | ||
| {HomepageTile("grow", "Financial Independence", "", "pink-two")} |
There was a problem hiding this comment.
| {HomepageTile("grow", "Financial Independence", "", "pink-two")} | |
| <HomepageTile icon="grow" label="Financial Independence" link="" color="pink-two" /> |
| <div className="container"> | ||
| <div className="columns"> | ||
| {/*<div className="column is-hidden-mobile"/>*/} | ||
| {HomepageTile("home", "Housing", "", "blue-one")} |
There was a problem hiding this comment.
Also, can we abstract this out to a constant object, like so:
const XYZ = [
{icon: 'home', ...}, ....
];
issue #1
todo
comment
this is a draft PR, please run on comp and try out and lemme know what you think ✨
there's 2 layouts, see the last 2 commits
main difference is horizontal header vs vertical header.
layout 1
layout 2