Spectre Media Figure
Last Updated :
07 Feb, 2022
The Spectre Media element includes responsive images, figures, and video classes.
In this article, we will learn about the media figure. We can use the element <figure> for an image with a caption. For that, we need to add the figure class to the <figure> element. The images with the img-responsive class will be responsive. Also, we can decorate the caption as well.
Spectre Media Figure class:
- figure: This class is used to set the captioned theme of the image, video.
- figure-caption: This class is used to define the basic style for the caption.
- text-*: This class is used to define the caption alignment.
Note: The * can be left, right, or center as per the application’s need.
Syntax:
<figure class="figure">
<img src="" alt="">
<figcaption class="Media Class">...</figcaption>
</figure>
Example: Below example illustrate the Spectre Media Figure.
HTML
<!DOCTYPE html>
< html >
< head >
< title >SPECTRE Media Class</ title >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< style >
img {
border: 4px solid green;
padding: 4px;
margin: 4px;
}
</ style >
</ head >
< body >
< center >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >SPECTRE Media Figure</ strong >
< br >< br >
< figure class = "figure" >
< img class = "img-responsive"
src =
alt = "geeksforgeeks"
width = "400px" >
< figcaption class = "figure-caption text-center" >
GeekWeek
</ figcaption >
</ figure >
</ center >
</ body >
</ html >
|
Output:
Reference: https://picturepan2.github.io/spectre/elements/media.html#media-figure
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...