Our Name is Mud - Component Library

Block: Process 

<div class="c-block bg-black">
    <div class="c-block__md text-white">
        [BLOCK IMAGE BALLS]
    </div>
    <div class="c-block__bd relative">
        <div class="c-block__list ">
            <h2 class="text-h4 text-white mb-1-5">Lorem, ipsum dolor.</h2>
            <div class="text-white text-lg font-light">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>
            </div>
        </div>
        <div class="c-block__list hidden">
            <h2 class="text-h4 text-white mb-1-5">Lorem, ipsum dolor.</h2>
            <div class="text-white text-lg font-light">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>
            </div>
        </div>
        <div class="c-block__list hidden">
            <h2 class="text-h4 text-white mb-1-5">Lorem, ipsum dolor.</h2>
            <div class="text-white text-lg font-light">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>
            </div>
        </div>
        <div class="c-block__list hidden">
            <h2 class="text-h4 text-white mb-1-5">Lorem, ipsum dolor.</h2>
            <div class="text-white text-lg font-light">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>
            </div>
        </div>
        <div class="c-block__list hidden">
            <h2 class="text-h4 text-white mb-1-5">Lorem, ipsum dolor.</h2>
            <div class="text-white text-lg font-light">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="c-block bg-black">
	<div class="c-block__md text-white">
		[BLOCK IMAGE BALLS]
	</div>
	<div class="c-block__bd relative">
		{% for item in process %}
			<div class="c-block__list {% if loop.index0 > 0 %}hidden{% endif %}">
				<h2 class="text-h4 text-white mb-1-5">{{ item.heading }}</h2>
				<div class="text-white text-lg font-light">{{ item.body|raw }}</div>
			</div>
		{% endfor %}
	</div>
</div>
 
{
  "siteTitle": "Mudstone Component Library",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "tel": "01225 471 465",
  "phone": "01225 471 465",
  "email": "hello@ournameismud.co.uk",
  "twitter": "asclearasmud",
  "copyright": "&copy; 2018 Our Name is Mud",
  "siteUrl": "/components/preview/home",
  "address": "5 Princes Buildings \nBath \nBA1 2ED",
  "cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself,&nbsp;<a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
  "entries": [
    {
      "title": "Projects",
      "url": "/components/preview/listing"
    },
    {
      "title": "About",
      "url": "/components/preview/about"
    },
    {
      "title": "Journal",
      "url": "/components/preview/journal"
    },
    {
      "title": "Contact",
      "url": "/components/preview/contact"
    }
  ],
  "heading": "Lorem ipsum dolor sit amet.",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ipsam quidem aut. Delectus, aspernatur nam?",
  "link": {
    "url": "#0",
    "text": "View project"
  },
  "image": {
    "url": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg",
    "aspect": 66.68,
    "src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
    "srcset": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg 768w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_71b9264554597c4f219c11a5f412f624.jpg 1024w, http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_c778f9fd339f8d233fb1ecbf954502b9.jpg 1600w",
    "alt": "Unsplash Placeholder 4"
  },
  "process": [
    {
      "heading": "Lorem, ipsum dolor.",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>"
    },
    {
      "heading": "Lorem, ipsum dolor.",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>"
    },
    {
      "heading": "Lorem, ipsum dolor.",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>"
    },
    {
      "heading": "Lorem, ipsum dolor.",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>"
    },
    {
      "heading": "Lorem, ipsum dolor.",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>"
    }
  ]
}
  • Content: 
    .c-block {
	@apply .px-1-5 .mb-2-5 .mx-auto;

	@screen md {
		@apply .px-2 .grid .mb-5;
	}

	@screen lg {
		@apply .mb-12 .px-3;
	}

	@screen xl {
		@apply .wrapper .mb-16 .px-5;
	}
}

.c-block--job {
	@apply .mb-0 .pb-2-5;

	@screen lg {
		@apply .pb-4;
	}

	@screen xl {
		@apply .pb-6;
	}
}

.c-block__md {
	@apply .mb-1-5;

	@screen md {
		@apply .mb-0;
	}
}

.c-block__bd {
	@screen md {
		@apply .pt-0-75;
	}

	@screen xl {
		@apply .pt-2;
	}
}

@screen md {
	.c-block {
		grid-auto-flow: dense;
	}

	.c-block__bd {
		grid-column: 14 / span 11;
	}

	.c-block__md {
		grid-column: 1 / span 12;
	}

	.c-block__bd--flip {
		grid-column: 1 / span 11;
	}

	.c-block__md--flip {
		grid-column: 13 / span 12;
	}

	.c-block__bd {
		grid-column: 16 / span 8;
	}

	.c-block__md {
		grid-column: 1 / span 12;
	}

	.c-block__bd--flip {
		grid-column: 2 / span 8;
	}

	.c-block__md--flip {
		grid-column: 13 / span 12;
	}

	.c-block--project {
		@apply .px-0;

		max-width: none;
		grid-template-columns: 1fr repeat(24, minmax(auto, 1800px)) 1fr;
	}

	.c-block--project-0 {
		.c-block__md {
			grid-column: 1 / span 14;
		}
	}

	.c-block--project-1 {
		.c-block__bd {
			grid-column: 3 / span 8;
		}

		.c-block__md--flip {
			grid-column: 12 / span 13;
		}
	}

	.c-block--project-2 {
		.c-block__md {
			grid-column: 2 / span 13;
		}
	}

	.c-block--project-3 {
		.c-block__md--flip {
			grid-column: 12 / span 15;
		}

		.c-block__bd {
			grid-column: 3 / span 8;
		}
	}

	.c-block__bd--intro {
		grid-column: 9 / span 16;
	}
}

@screen lg {
	.c-block__bd--intro {
		grid-column: 14 / span 11;
	}
}

@screen max {
	.c-block--project {
		grid-template-columns: 1fr repeat(24, #{(1200px / 24)}) 1fr;
	}
}
  • URL: /components/raw/block/_block.scss
  • Filesystem Path: src/templates/04-components/block/_block.scss
  • Size: 1.7 KB

There are no notes for this item.