Breadcrumbs

Download CTA component and Download banner assembly

With this component/assembly combination, you can give users document downloads along with a preview image of the document.

image-20240912-134032.png


First, you need to upload your document and its file preview to the Media library:

  1. Go to the Media library (tab in the top toolbar of Contentful)

  2. Use Add asset to select Single asset

  3. Use the file selector to upload your file preview image

  4. Give your preview image a clear name, including the document title and the image's purpose, e.g. ‘Shelter Impact Report 2023/24 file preview’

  5. Publish

  6. Repeat steps 2-5 to upload your document. Give it a clear description: 20-40 words that explain the document's topic, purpose, authors, date or any other information relevant for the user.

Now you can start building the component:

  1. Use Add entry and select Component – Download CTA

  2. Button text – what the user will see within the red download button

  3. Download – use Add existing media to find and add your document from the Media library

  4. File preview – use Add existing media to find and add your image from the Media library

  5. Publish

And now for the assembly:

  1. Use Add entry and select Assembly – Download banner

  2. Assembly name – the system name seen in Contentful

  3. Header - this will display as bold normal text above the download button. It’s not required, so think about whether a header will add value to the user.

  4. Remove margin bottom – select Yes if you want to remove the 40-pixel white space under the banner

  5. Download CTA – use Link existing entry to find and add the Download CTA component you've just created

  6. Background colour – select White or Grey

  7. Button type – a primary button is red while a secondary button is black and white

image-20240912-140507.png
image-20240912-135726.png

  1. Publish

Your download block is now ready to be added to pages.


Any questions? Email Lindsay Foley in the Central Digital team.