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
          Button_primary_small--UI_specs.png
          65 kB
        2. covers-block-beta.png
          covers-block-beta.png
          640 kB
        3. TA_cover--M-L-XL--UI-specs.png
          TA_cover--M-L-XL--UI-specs.png
          386 kB
        4. TA_covers--M--alt1.png
          TA_covers--M--alt1.png
          792 kB
        5. ta-card-tracking.jpg
          ta-card-tracking.jpg
          154 kB
        6. Take Action cover - v6 - Desktop & Desktop HD (gallery) - right-aligned .png
          Take Action cover - v6 - Desktop & Desktop HD (gallery) - right-aligned .png
          1.37 MB

            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: