Daniel template uses a number of custom image groups or blocks. You can add a shadow for this group, as well as adjust sizing such as padding and margins. You can also manipulate the corners of these blocks. See all examples below.
Classic image block with a border and shadow
In this example, we add an image-paper classname to add a custom shadow to our image block.
border, border-3, rounded classnames use bootstrap logic. You can read about it here.
image-cover classname offer img control that adjust fitting setting and position of the image. In this case, we fit the image into the cover and position it center.
<div class="image-paper border rounded p-3">
<img src="./assets/images/Person.jpg" class="image-cover img-fluid rounded" alt="...">
</div>You can also change the border color using bootstrap logic. For example, border-primary uses the primary color of CSS variables. See example below.
<div class="image-paper border-primary rounded p-3">
<img src="./assets/images/Person.jpg" class="image-cover img-fluid rounded" alt="...">
</div>Instead of using the image-paper classname, we can use another class called paper. In this case we get a different shadow style. See example below.
<div class="border p-3 rounded">
<img src="./assets/images/Person2.jpg" class="rounded image-cover" width="100" height="100" alt="">
</div>We are using this component as a nested component in other big blocks or components such us testimonial, feature-block ,etc.