Duo Tone
Give your images a two-tone, duotone style using your own custom picked colors. Add an artistic touch to individual images to set help them apart.
- Create beautiful, one-off effects for your images
- Style using your own custom chosen colors
Example
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Using Duo Tone
General
Remove Base Margin
This setting lets you disable the preset standard spacing that is applied to the bottom of the stack.
Image
Image
Drop the image you wish to apply a duotone effect to here.
Alignment
You are able to choose where how you’d like to align your image. You can choose to align it to the left, center or right.
Image Sizing
This feature allows you to choose how Foundry displays your image when it comes to responsive sizing. You can choose to have the image display normally, as-is and only scale downwards when the image would otherwise begin to overflow the bounds of its parent container or you can choose one of the following:
- Normal: Image retains its original height and width and only scales downward for display on smaller devices.
- Upscale to 100%: Forces the image to scale itself past its original size, enlarging itself to fill out the entire width of its parent container.
- Max-Width: Set a maximum width for your image. The image will never scale up beyond this value but will still responsively scale downwards to ensure it fits within the bound of its parent container.
Alt. Tag.
Provides you a way to add an Alt. Tag to your thumbnail. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.
Duo Tone Colors
Light and Dark Color
Here you will choose a dark and light color which will be layered on top of your image and mixed with a blending mode. This creates the duotone effect. Experiment with different colors and variations to get a look you’re happy with for your image.
Corners Styling
Round Corners
Set how round you wish to have the image’s corners. You can set the corner roundness uniformly or choose to set each corner to its own individual border radius value.
Shadow
Drop Shadow
Allows you to add a customizable drop shadow to the image. You can adjust the shadow size, vertical and horizontal offset as well as its color.