Container

Preview:

Ekstraudstyr

Her ses et udvalg af det mest populære ekstraudstyr.

Fjernlysassistent
40 kr./md.
Se detaljer
Technology selection
380 kr./md.
Se detaljer
Bakspejl, automatisk nedblændeligt
50 kr./md.
Se detaljer
Plus selection
460 kr./md.
Se detaljer
Sportssæder foran
150 kr./md.
Se detaljer
Baggagerumspakke
20 kr./md.
Se detaljer
Opbevarings- og bagagerumspakke
200 kr./md.
Se detaljer
Bang & Olufsen Sound System
240 kr./md.
Se detaljer

Configuration:

Output:

Vue component

            
<CardEquipment :equipment="cardEquipments" />
    
<script>
  export default {
    data() {
        return {
            cardEquipments: [
            {
              inputname: "ce01",
              image: require(`@/global/prototype-assets/images/card-equipment/ce01.png`),
              title: "Fjernlysassistent",
              text: "40 kr./md.",
            },
            {
              inputname: "ce02",
              image: require(`@/global/prototype-assets/images/card-equipment/ce02.png`),
              title: "Technology selection",
              text: "380 kr./md.",
            },
            {
              inputname: "ce03",
              image: require(`@/global/prototype-assets/images/card-equipment/ce03.png`),
              title: "Bakspejl, automatisk nedblændeligt",
              text: "50 kr./md.",
            },
            {
              inputname: "ce04",
              image: require(`@/global/prototype-assets/images/card-equipment/ce04.png`),
              title: "Plus selection",
              text: "460 kr./md.",
            },
            {
              inputname: "ce05",
              image: require(`@/global/prototype-assets/images/card-equipment/ce05.png`),
              title: "Sportssæder foran",
              text: "150 kr./md.",
            },
            {
              inputname: "ce06",
              image: require(`@/global/prototype-assets/images/card-equipment/ce06.png`),
              title: "Baggagerumspakke",
              text: "20 kr./md.",
            },
            {
              inputname: "ce07",
              image: require(`@/global/prototype-assets/images/card-equipment/ce07.png`),
              title: "Opbevarings- og bagagerumspakke",
              text: "200 kr./md.",
            },
            {
              inputname: "ce08",
              image: require(`@/global/prototype-assets/images/card-equipment/ce08.png`),
              title: "Bang & Olufsen Sound System",
              text: "240 kr./md.",
            },
          ],
        };
    },
};
</script>

Raw HTML

            
<div class="card-equipment-list">
    <h4 class="headline-4 font-weight-bold font-family-normal">Ekstraudstyr</h4>
    <p>
        Her ses et udvalg af det mest populære ekstraudstyr.
    </p>
    <div class="card-equipment-list-wrapper">
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce01" value="0">
                    <input type="hidden">
                    <label for="ce01">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Fjernlysassistent
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce01.png" alt="Fjernlysassistent">
                </div>
                <div class="card-equipment-text">40 kr./md.</div>
            </div>
        </div>
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce02" value="1">
                    <input type="hidden">
                    <label for="ce02">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Technology selection
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce02.png" alt="Technology selection">
                </div>
                <div class="card-equipment-text">380 kr./md.</div>
            </div>
        </div>
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce03" value="2">
                    <input type="hidden">
                    <label for="ce03">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Bakspejl, automatisk nedblændeligt
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce03.png" alt="Bakspejl, automatisk nedblændeligt">
                </div>
                <div class="card-equipment-text">50 kr./md.</div>
            </div>
        </div>
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce04" value="3">
                    <input type="hidden">
                    <label for="ce04">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Plus selection
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce04.png" alt="Plus selection">
                </div>
                <div class="card-equipment-text">460 kr./md.</div>
            </div>
        </div>
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce05" value="4">
                    <input type="hidden">
                    <label for="ce05">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Sportssæder foran
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce05.png" alt="Sportssæder foran">
                </div>
                <div class="card-equipment-text">150 kr./md.</div>
            </div>
        </div>
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce06" value="5">
                    <input type="hidden">
                    <label for="ce06">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Baggagerumspakke
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce06.png" alt="Baggagerumspakke">
                </div>
                <div class="card-equipment-text">20 kr./md.</div>
            </div>
        </div>
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce07" value="6">
                    <input type="hidden">
                    <label for="ce07">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Opbevarings- og bagagerumspakke
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce07.png" alt="Opbevarings- og bagagerumspakke">
                </div>
                <div class="card-equipment-text">200 kr./md.</div>
            </div>
        </div>
        <div class="card-equipment">
            <div class="card-equipment-wrapper">
                <div class="checkbox">
                    <input type="checkbox" id="ce08" value="7">
                    <input type="hidden">
                    <label for="ce08">
                        <svg focusable="false" width="24" height="24">
                            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
                        </svg>
                        Bang &amp; Olufsen Sound System
                    </label>
                </div>
                <div class="card-equipment-image">
                    <img src="/_nuxt/src/global/prototype-assets/images/card-equipment/ce08.png" alt="Bang &amp; Olufsen Sound System">
                </div>
                <div class="card-equipment-text">240 kr./md.</div>
            </div>
        </div>
    </div>
    <div class="d-flex justify-center">
        <button role="button" class="margin100-y btn btn-primary">
            Vis mere udstyr 
        </button>
    </div>
</div>

Comments

If you forget to set container "size" - it defaults to use <div class="container">