Menu icon Foundation
Code a calendar icon using Inky?
 

I'd like to use Inky to create a calendar "icon" to promote an event; screenshot below. Any advice?

 

P.s. Is there a showcase or gallery of common UI elements created by Inky? I know Foundation for Sites and Bootstrap have such collections of snippets.

 

emailinkyCalendar

 

I'd like to use Inky to create a calendar "icon" to promote an event; screenshot below. Any advice?

 

P.s. Is there a showcase or gallery of common UI elements created by Inky? I know Foundation for Sites and Bootstrap have such collections of snippets.

 

Ede Oldi over 2 years ago

I'd use the <callout> component with some custom CSS to adjust the margins and paddings, like so:

<container>
  <row>
    <columns large="4">
    /* nothing here*/
    </columns>
    <columns large="4">
      <callout class="month">
        <p class="text-center">JAN</p>
      </callout>
      <callout class="day">
        <h1 class="text-center">12</h1>
      </callout>
    </columns>
    <columns large="4">
    /* nothing here*/
    </columns>
  </row>
</container>

Define background-colors for .month and .day, and you're ready to go.

Let me know if this works!

Jim Welch over 2 years ago

Thanks, Ede! This gives me a good start. Appreciate the help.