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@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121175934/gfg2-297x300.jpg" 
                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

Explore