Spectre Media Figure

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=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
    <style>
        img {
            border: 4px solid green;
            padding: 4px;
            margin: 4px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 class="text-success">w3wiki</h1>
        <strong>SPECTRE Media Figure</strong>
        <br><br>
        <figure class="figure">
            <img class="img-responsive"
                src=
"https://media.w3wiki.net/wp-content/uploads/20220121175934/gfg2-297x300.jpg"
                alt="w3wiki"
                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

HTML

Contact Us