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
CSS
: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 👋


Comments

If you liked this post, you might like these ones, too

  1. Solution: Progress Button

    Front-End Challenges Club - Solution #004

    Continue
  2. Solution: Progress Stepper

    Front-End Challenges Club - Challenge #008

    Continue
  3. Solution: Toggle switch

    Front-End Challenges Club - Solution #002

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.