Design Engine auto generated syntax v1

card-grid.css

.activity {
	position: absolute;
  top: 0px;
  left: 0px;
  width: 375px;
  height: 812px;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 375px;
  height: 812px;
  background-color: #FFFFFF;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 375px;
  height: 140px;
  background-color: #FFFFFF;
}
.home {
  position: absolute;
  top: 97px;
  left: 17px;
  width: 121px;
  height: 35px;
  font-family: "SFProText Semibold", sans-serif;
  font-weight: 600;
  font-size: 35px;
  color: #000000;
  letter-spacing: -1.24px;
  line-height: 41px;
  text-align: left;
}
.settings {
  position: absolute;
  top: 59px;
  left: 316px;
  width: 43px;
  height: 14px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #007AFF;
  letter-spacing: -0.41px;
  line-height: 22px;
  text-align: right;
}
.card {
  position: absolute;
  top: 188px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #007AFF;
}
.background {
  position: absolute;
  top: 188px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #007AFF;
}
.you-have-completed-a {
  position: absolute;
  top: 209px;
  left: 36px;
  width: 227px;
  height: 18px;
  font-family: "SFProText Bold", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.43px;
  line-height: 24px;
  text-align: left;
}
.today-1125-am {
  position: absolute;
  top: 235px;
  left: 36px;
  width: 92px;
  height: 13px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0.00px;
  line-height: 14px;
  text-align: left;
}
.chevron {
  position: absolute;
  top: 213px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.background {
  position: absolute;
  top: 213px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.chevron {
  position: absolute;
  top: 213px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.chevron-icon {
  position: absolute;
  top: 213px;
  left: 311px;
  width: 27px;
  height: 28px;
  background: url("[email protected]");
}
.bounds {
  position: absolute;
  top: 213px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.shape {
  position: absolute;
  top: 221px;
  left: 322px;
  width: 6px;
  height: 12px;
  background-color: #FFFFFF;
}
.card {
  position: absolute;
  top: 286px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #2AE735;
}
.background {
  position: absolute;
  top: 286px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #2AE735;
}
.you-have-ran-10-mile {
  position: absolute;
  top: 306px;
  left: 36px;
  width: 190px;
  height: 16px;
  font-family: "SFProText Bold", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.43px;
  line-height: 24px;
  text-align: left;
}
.today-1125-am {
  position: absolute;
  top: 333px;
  left: 36px;
  width: 92px;
  height: 13px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0.00px;
  line-height: 14px;
  text-align: left;
}
.chevron {
  position: absolute;
  top: 311px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.background {
  position: absolute;
  top: 311px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.chevron {
  position: absolute;
  top: 311px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.chevron-icon {
  position: absolute;
  top: 311px;
  left: 311px;
  width: 27px;
  height: 28px;
  background: url("[email protected]");
}
.bounds {
  position: absolute;
  top: 311px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.shape {
  position: absolute;
  top: 319px;
  left: 322px;
  width: 6px;
  height: 12px;
  background-color: #FFFFFF;
}
.card {
  position: absolute;
  top: 384px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #FF8B1E;
}
.background {
  position: absolute;
  top: 384px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #FF8B1E;
}
.you-completed-a-task {
  position: absolute;
  top: 405px;
  left: 36px;
  width: 190px;
  height: 18px;
  font-family: "SFProText Bold", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.43px;
  line-height: 24px;
  text-align: left;
}
.today-1125-am {
  position: absolute;
  top: 431px;
  left: 36px;
  width: 92px;
  height: 13px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0.00px;
  line-height: 14px;
  text-align: left;
}
.chevron {
  position: absolute;
  top: 409px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.background {
  position: absolute;
  top: 409px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.chevron {
  position: absolute;
  top: 409px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.chevron-icon {
  position: absolute;
  top: 409px;
  left: 311px;
  width: 27px;
  height: 28px;
  background: url("[email protected]");
}
.bounds {
  position: absolute;
  top: 409px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.shape {
  position: absolute;
  top: 417px;
  left: 322px;
  width: 6px;
  height: 12px;
  background-color: #FFFFFF;
}
.card {
  position: absolute;
  top: 482px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #D96CFF;
}
.background {
  position: absolute;
  top: 482px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #D96CFF;
}
.someone-near-you-is {
  position: absolute;
  top: 502px;
  left: 36px;
  width: 177px;
  height: 40px;
  font-family: "SFProText Bold", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.43px;
  line-height: 24px;
  text-align: left;
}
.chevron {
  position: absolute;
  top: 507px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.background {
  position: absolute;
  top: 507px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.chevron {
  position: absolute;
  top: 507px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.chevron-icon {
  position: absolute;
  top: 507px;
  left: 311px;
  width: 27px;
  height: 28px;
  background: url("[email protected]");
}
.bounds {
  position: absolute;
  top: 507px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.shape {
  position: absolute;
  top: 515px;
  left: 322px;
  width: 6px;
  height: 12px;
  background-color: #FFFFFF;
}
.card {
  position: absolute;
  top: 580px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #186E5B;
}
.background {
  position: absolute;
  top: 580px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #186E5B;
}
.complete-your-task {
  position: absolute;
  top: 601px;
  left: 36px;
  width: 173px;
  height: 18px;
  font-family: "SFProText Bold", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.43px;
  line-height: 24px;
  text-align: left;
}
.today-1125-am {
  position: absolute;
  top: 627px;
  left: 36px;
  width: 92px;
  height: 13px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0.00px;
  line-height: 14px;
  text-align: left;
}
.chevron {
  position: absolute;
  top: 605px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.background {
  position: absolute;
  top: 605px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.chevron {
  position: absolute;
  top: 605px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.chevron-icon {
  position: absolute;
  top: 605px;
  left: 311px;
  width: 27px;
  height: 28px;
  background: url("[email protected]");
}
.bounds {
  position: absolute;
  top: 605px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.shape {
  position: absolute;
  top: 613px;
  left: 322px;
  width: 6px;
  height: 12px;
  background-color: #FFFFFF;
}
.background {
  position: absolute;
  top: 140px;
  left: 0px;
  width: 375px;
  height: 48px;
  background-color: #FFFFFF;
}
.today {
  position: absolute;
  top: 153px;
  left: 17px;
  width: 72px;
  height: 26px;
  font-family: "SFProText Semibold", sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #000000;
  letter-spacing: -0.63px;
  line-height: 22px;
  text-align: left;
}
.all {
  position: absolute;
  top: 157px;
  left: 337px;
  width: 18px;
  height: 14px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #007AFF;
  letter-spacing: -0.41px;
  line-height: 22px;
  text-align: right;
}
.card {
  position: absolute;
  top: 716px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #007AFF;
}
.background {
  position: absolute;
  top: 716px;
  left: 16px;
  width: 342px;
  height: 78px;
  background-color: #007AFF;
}
.you-have-completed-a {
  position: absolute;
  top: 737px;
  left: 36px;
  width: 227px;
  height: 18px;
  font-family: "SFProText Bold", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.43px;
  line-height: 24px;
  text-align: left;
}
.today-1125-am {
  position: absolute;
  top: 763px;
  left: 36px;
  width: 92px;
  height: 13px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0.00px;
  line-height: 14px;
  text-align: left;
}
.chevron {
  position: absolute;
  top: 741px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.background {
  position: absolute;
  top: 741px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #000000;
}
.chevron {
  position: absolute;
  top: 741px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.chevron-icon {
  position: absolute;
  top: 741px;
  left: 311px;
  width: 27px;
  height: 28px;
  background: url("[email protected]");
}
.bounds {
  position: absolute;
  top: 741px;
  left: 311px;
  width: 27px;
  height: 28px;
  background-color: #FFFFFF;
}
.shape {
  position: absolute;
  top: 749px;
  left: 322px;
  width: 6px;
  height: 12px;
  background-color: #FFFFFF;
}
.background {
  position: absolute;
  top: 668px;
  left: 0px;
  width: 375px;
  height: 48px;
  background-color: #FFFFFF;
}
.yesterday {
  position: absolute;
  top: 681px;
  left: 16px;
  width: 121px;
  height: 26px;
  font-family: "SFProText Semibold", sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #000000;
  letter-spacing: -0.63px;
  line-height: 22px;
  text-align: left;
}
.all {
  position: absolute;
  top: 685px;
  left: 337px;
  width: 18px;
  height: 14px;
  font-family: "SFProText Regular", sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #007AFF;
  letter-spacing: -0.41px;
  line-height: 22px;
  text-align: right;
}
.tab-bar {
  position: absolute;
  top: 729px;
  left: 0px;
  width: 375px;
  height: 83px;
  background-color: #F8F8F8;
}
.background {
  position: absolute;
  top: 729px;
  left: 0px;
  width: 375px;
  height: 83px;
  background-color: #F8F8F8;
}
.settings-tab {
  position: absolute;
  top: 729px;
  left: 304px;
  width: 71px;
  height: 48px;
  background-color: #D8D8D8;
}
.settings {
  position: absolute;
  top: 765px;
  left: 321px;
  width: 37px;
  height: 11px;
  font-family: "SFProText Medium", sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #8E8E93;
  letter-spacing: -0.24px;
  line-height: 13px;
  text-align: center;
}
.settings-icon {
  position: absolute;
  top: 736px;
  left: 325px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.settings-icon {
  position: absolute;
  top: 736px;
  left: 325px;
  width: 30px;
  height: 26px;
  background: url("[email protected]");
}
.rectangle {
  position: absolute;
  top: 736px;
  left: 325px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.shape {
  position: absolute;
  top: 739px;
  left: 330px;
  width: 21px;
  height: 20px;
  background-color: #8E8E93;
}
.profile-tab {
  position: absolute;
  top: 729px;
  left: 228px;
  width: 71px;
  height: 48px;
  background-color: #D8D8D8;
}
.profile {
  position: absolute;
  top: 765px;
  left: 250px;
  width: 28px;
  height: 9px;
  font-family: "SFProText Medium", sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #8E8E93;
  letter-spacing: -0.24px;
  line-height: 13px;
  text-align: center;
}
.profile-icon {
  position: absolute;
  top: 736px;
  left: 249px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.profile-icon {
  position: absolute;
  top: 736px;
  left: 249px;
  width: 30px;
  height: 26px;
  background: url("[email protected]");
}
.rectangle {
  position: absolute;
  top: 736px;
  left: 249px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.shape {
  position: absolute;
  top: 738px;
  left: 253px;
  width: 22px;
  height: 22px;
  background-color: #8E8E93;
}
.post-action {
  position: absolute;
  top: 729px;
  left: 152px;
  width: 71px;
  height: 48px;
  background-color: #007AFF;
}
.rectangle {
  position: absolute;
  top: 737px;
  left: 164px;
  width: 48px;
  height: 40px;
  background-color: #007AFF;
}
.compose-icon {
  position: absolute;
  top: 744px;
  left: 173px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.compose-icon {
  position: absolute;
  top: 744px;
  left: 173px;
  width: 30px;
  height: 26px;
  background: url("[email protected]");
}
.rectangle {
  position: absolute;
  top: 744px;
  left: 173px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.shape {
  position: absolute;
  top: 745px;
  left: 178px;
  width: 21px;
  height: 22px;
  background-color: #FFFFFF;
}
.activity-tab {
  position: absolute;
  top: 729px;
  left: 76px;
  width: 71px;
  height: 48px;
  background-color: #D8D8D8;
}
.activity {
  position: absolute;
  top: 765px;
  left: 95px;
  width: 34px;
  height: 11px;
  font-family: "SFProText Medium", sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #007AFF;
  letter-spacing: -0.24px;
  line-height: 13px;
  text-align: center;
}
.tab-bg {
  position: absolute;
  top: 733px;
  left: 88px;
  width: 48px;
  height: 32px;
  background-color: #D8D8D8;
}
.activity-icon {
  position: absolute;
  top: 736px;
  left: 97px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.activity-icon {
  position: absolute;
  top: 736px;
  left: 97px;
  width: 30px;
  height: 26px;
  background: url("[email protected]");
}
.rectangle {
  position: absolute;
  top: 736px;
  left: 97px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.bell {
  position: absolute;
  top: 739px;
  left: 104px;
  width: 15px;
  height: 20px;
  background-color: #007AFF;
}
.shape {
  position: absolute;
  top: 739px;
  left: 104px;
  width: 15px;
  height: 16px;
  background-color: #007AFF;
}
.shape {
  position: absolute;
  top: 756px;
  left: 109px;
  width: 4px;
  height: 2px;
  background-color: #007AFF;
}
.home-tab {
  position: absolute;
  top: 729px;
  left: 0px;
  width: 71px;
  height: 48px;
  background-color: #D8D8D8;
}
.home {
  position: absolute;
  top: 765px;
  left: 23px;
  width: 26px;
  height: 9px;
  font-family: "SFProText Medium", sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #9B9B9B;
  letter-spacing: -0.24px;
  line-height: 13px;
  text-align: center;
}
.tab-bg {
  position: absolute;
  top: 733px;
  left: 12px;
  width: 48px;
  height: 32px;
  background-color: #D8D8D8;
}
.home-icon {
  position: absolute;
  top: 736px;
  left: 21px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.rectangle {
  position: absolute;
  top: 736px;
  left: 21px;
  width: 30px;
  height: 26px;
  background-color: #D8D8D8;
}
.home-icon {
  position: absolute;
  top: 736px;
  left: 21px;
  width: 30px;
  height: 26px;
  background: url("[email protected]");
}
.shape {
  position: absolute;
  top: 740px;
  left: 27px;
  width: 18px;
  height: 17px;
  background-color: #9B9B9B;
}
.status-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 375px;
  height: 44px;
}