A text card is a versatile and simple design element used in web design to display text content along with optional images, links, or other media. It typically features a background colour, a border, and can be styled to make information stand out on a webpage. Text cards are often used to highlight offers, promotions, or key pieces of information in a visually appealing manner. You might consider adding a text card to make a blog article more engaging!
Text Card
Add CSS to Your Custom CSS:
First, you'll need to add the following CSS to your website's custom CSS. This will style the card with a green background, underline links, and position an image in the top right corner.
How To Set Up
2. Add a Code Block to Your Page:
Next, go to the page where you want to display the green card and add a code block. Insert the following HTML code into the code block:
Customising the Code:
Text Colour: To change the text colour, add a
colourproperty to the.green-cardCSS rule.Font Size: Adjust the font size by adding a
font-sizeproperty.Image Size: Change the
widthandheightproperties in the.green-card imgCSS rule to resize the image.Padding and Margins: Adjust the
paddingandmarginvalues to change the spacing inside and outside the card.
Save and Preview:
Once you’ve added and customised the code, save the page and preview it to see how the accordion behaves.
Customise
Need Custom Solutions?
All of our pre-built codes are completely free to use! If you need a more bespoke solution or want additional customisations, feel free to get in touch for a free quote. Don’t pay extortionate agency fees—our team of designers charge by the hour and can deliver tailor-made solutions for your Squarespace website.