Challenge: Heading Keyline


Front-End Challenges Club - Challenge #007

Keylines are a great traditional graphic design trick to frame a heading. Historically, they’ve been a bit fiddly on the web, so for this challenge, we’re going to try to change that.

What you’re building permalink

A heading with keyline that reads "keylines look dope"

The brief permalink

Take the design assets and build a flexible, keyline component that frames text. This would probably be mostly for headlines, but it could work for short summaries too.

You should aim for the following:

  • Your solution is progressively enhanced
  • It works well if there is a small amount of text or a larger amount of text
  • Make sure your keyline never interferes with the text content

Assets permalink

I’ve used Sketch to design this challenge. You can view everything you need in the browser, here.

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

Code language
:root {
  --color-dark: #1c2334;
  --color-light: #fcf3e1;
  --color-primary: #e9b44c;

Wrapping up permalink

When you’ve tried building this one for yourself, head over to the solution to see how I built it!

See you at the next one 👋

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.