Skip to content

Latest commit

 

History

History
95 lines (68 loc) · 2.24 KB

FEATURE.md

File metadata and controls

95 lines (68 loc) · 2.24 KB
Raw

Feature

./src/js/components/feature/feature.jsx

Purpose

Sometimes you want to feature things among other stuff, while still maintaining a classy marketer's standard. This is the component for you, my friend!~

Props

headline

  • Required - false
  • Data Type - STRING || ELEMENT
  • Functionality - The text or element to display in the component headline
  • Default - ''

img

  • Required - false
  • Data Type - STRING
  • Functionality - The URL to the image that displays with this component.
  • Default - ''

imgAlt

  • Required - false
  • Data Type - STRING
  • Functionality - The alt property text for the image
  • Default - ''

imgLink

  • Required - false
  • Data Type - TYPE
  • Functionality - A URL to send a user to upon clicking the image link

imgOnClick

  • Required - false
  • Data Type - FUNCTION
  • Functionality - A function to activate instead of a link upon clicking the associated image link
  • Default - () => {}

cta

  • Required - false
  • Data Type - STRING
  • Functionality - The text on the call to action button of the component. The button is not rendered if this is not here.

ctaLink

  • Required - false
  • Data Type - STRING
  • Functionality - The url to send a user to upon clicking the item

ctaOnClick

  • Required - false
  • Data Type - FUNCTION
  • Functionality - A function to activate instead of a link upon clicking the call to action button
  • Default - () => {}

ctaTheme

  • Required - false
  • Data Type - STRING
  • Functionality - The Bootstrap color theme for the call to action button.
  • Default - btn-success

content

  • Required - false
  • Data Type - STRING || ELEMENT
  • Functionality - Displays textual or elemental(the markup-type, not the table-top-type) content in the description area
  • Default - ''

Takes Children

  • Expected Type - Elements of all types and sorts
  • Displays Inside - a .media-body
  • Displays After - The content prop

Example

import Feature from './src/js/components/feature/feature.jsx';

<Feature
  headline="New Feature"
  img="#"
  imgLink="https://example.com"
  cta="Check it~"
  ctaOnClick={() => { alert("You are interested in this feature!"); }}
  content="This feature is baller---"
/>