Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5608

Covers: Implement "Take action" style new design

XMLWordPrintable

    • 8
    • Block: Covers
    • Sprint #166
    • iocaste

      Here is the link to the new Take action covers design

      The comments on each of the InVision screens are the same, so no need for the devs to go through each of them. This is what they say:

      HTML/CSS Prototype:
      Link to HTML/CSS prototype: https://codepen.io/matthew-hinders-anderson/pen/qBZGvvz?editors=1100

      Design notes:

      The entire card should function as a clickable link
      Card height is fixed, see CSS below for exact values
      Only show one tag, even if more exist
      Limit card title to 60 characters
      Limit card description to 110 characters
      Limit button text to 20 characters
      Button uses a new style, "Primary CTA small"
      Button stays in the bottom right of the card, even when the card text does not fill the entire space.

        1. Button_primary_small--UI_specs.png
          65 kB
          Matthew Hinders-Anderson
        2. covers-block-beta.png
          640 kB
          Andrada Radu
        3. TA_cover--M-L-XL--UI-specs.png
          386 kB
          Matthew Hinders-Anderson
        4. TA_covers--M--alt1.png
          792 kB
          Matthew Hinders-Anderson
        5. ta-card-tracking.jpg
          154 kB
          Julia Marubayashi
        6. Take Action cover - v6 - Desktop & Desktop HD (gallery) - right-aligned .png
          1.37 MB
          Matthew Hinders-Anderson

            mleray Maud Leray
            mfatome Magali Fatome (Inactive)
            Magali Fatome Magali Fatome (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: