Components - Banners

1

Type: corner (diagonal)
Tags: promotion; button; highlight

Preview

Implementation

Markup

banner-1(*url*, *text*, *[icon]*, *[hook]*)
Parameter	Definition	Type
url	attribute: href	string
text	banner text	string
icon	SVG: path	string
hook	attribute: class	string

Brief

Page corner banner for use as a button. Takes an optional path to an SVG icon that will add interaction and be inlined during build. Works well as a direct child of an element with relative positioning.

Paths

location: components/banners/1
activate: templates/_/mixins.pug

Placement

markup: templates/views/**/*.pug
style: styles/views/**/*.pug

Dependencies

_.pug
index.styl

Examples

div
    +banner-1("https://example.com/", "Awesome")
    // or with icon effect
    +banner-1("#uri", "Banner", "images/_inline/icon.svg")

banner-1()