Home Style Guide

Style Guide

Test content

Header h1. Lorem ipsum dolor sit ammet!

<h1>Header h1. Lorem ipsum dolor sit ammet!</h1>

Header h1-light. Lorem ipsum dolor sit ammet!

<h1 class="h1-light">h1-light. Lorem ipsum dolor sit ammet!</h1>

Header h2. Lorem ipsum dolor sit ammet!

<h2>Header h2. Lorem ipsum dolor sit ammet!</h2>

Header h2-light. Lorem ipsum dolor sit ammet!

<h2 class="h2-light">Header h2-light. Lorem ipsum dolor sit ammet!</h2>

Header h3. Lorem ipsum dolor sit ammet!

<h3>Header h3. Lorem ipsum dolor sit ammet!</h3>

Header h3 Ubuntu-italic bold. Lorem ipsum dolor sit ammet!

<h3 class="ubuntu-italic">Header h3. Lorem ipsum dolor sit ammet!</h3>

Header h3 italic. Lorem ipsum dolor sit ammet!

<h3 class="fst-italic">Header h3. Lorem ipsum dolor sit ammet!</h3>

Header h4. Lorem ipsum dolor sit ammet!

<h4>Header h4. Lorem ipsum dolor sit ammet!</h4>

Header h5. Lorem ipsum dolor sit ammet!

<h5>Header h5. Lorem ipsum dolor sit ammet!</h5>

Header h6. Lorem ipsum dolor sit ammet!

<h6>Header h6. Lorem ipsum dolor sit ammet!</h6>

Find out more

<a href="/cmsctx/pv/4020e936-12f5-4d7b-b70d-7fb2e42ca092/culture/en-US/wg/d1b82981-9ba8-4217-864c-cf1d00a8c2da/readonly/0/pts/638071590676082403/ea/1/h/00ba2c182f4497572137b7b44c861b2f4d55c7e76d47bc19b484884b1fdae1b1/-/?uh=c49aca57eff111bdf08885cc6a68bdf2087900fc5beb9d9951717794f6a75c04" class="text-uppercase button-transparent text-secondary border border-secondary link-button">
    Text
    <svg class="ms-1" width="15" height="6" viewBox="0 0 15 6" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.26042 5.87402V4.05908L0 4.05908V1.88257L6.26042 1.88257V0.125977L15 2.88257L6.26042 5.87402Z" fill="#CE123D"/>
    </svg>
</a>

Phone link

<a href="tel:+123456789" class="btn-base link text-center text-uppercase text-white border-0">Contact us</a>

Link

<a href="/cmsctx/pv/4020e936-12f5-4d7b-b70d-7fb2e42ca092/culture/en-US/wg/d1b82981-9ba8-4217-864c-cf1d00a8c2da/readonly/0/pts/638071590676082403/ea/1/h/00ba2c182f4497572137b7b44c861b2f4d55c7e76d47bc19b484884b1fdae1b1/-/?uh=c49aca57eff111bdf08885cc6a68bdf2087900fc5beb9d9951717794f6a75c04" class="btn-base link text-center text-uppercase text-white border-0">Contact us</a>

<button class="btn-nulled tab-button bg-primary text-white">Tab</button>

<button class="btn-nulled tab-button">Tab</button>

Input

<div class="input" >
    <input
            type="text"
            class="text-black"
            placeholder="Hint text"
            name="name"
            id="input"
    >
</div>

Input Warning

<div class="input input-danger" >
    <input
            type="text"
            class="text-black"
            placeholder="Hint text"
            name="name"
            id="input"
    >
</div>

Input with search icon


<div class="input d-flex align-items-center">
    <svg class="input-search-icon cursor-pointer" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_176_69865)">
            <path d="M11 12L14.5 15.5" stroke="#002157" stroke-width="2"/>
            <circle cx="7" cy="8" r="5" stroke="#002157" stroke-width="2"/>
        </g>
        <defs>
            <clipPath id="clip0_176_69865">
                <rect width="15.4074" height="16.5926" fill="white"/>
            </clipPath>
        </defs>
    </svg>
    <input
            type="text"
            class="text-black p-0"
            placeholder="Hint text"
            name="name"
            id="input-search-icon"
    >
</div>

Input with search and close icons


<div class="input d-flex align-items-center">
    <svg class="input-search-icon cursor-pointer" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_176_69865)">
            <path d="M11 12L14.5 15.5" stroke="#002157" stroke-width="2"/>
            <circle cx="7" cy="8" r="5" stroke="#002157" stroke-width="2"/>
        </g>
        <defs>
            <clipPath id="clip0_176_69865">
                <rect width="15.4074" height="16.5926" fill="white"/>
            </clipPath>
        </defs>
    </svg>
    <input
            type="text"
            class="text-black p-0"
            placeholder="Hint text"
            name="name"
            id="input-search-icon"
    >
    <svg class="me-2 cursor-pointer" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 5L11 11" stroke="#002157" stroke-width="2"/>
        <path d="M5 11L11 5" stroke="#002157" stroke-width="2"/>
        <circle cx="8" cy="8" r="7" stroke="#002157" stroke-width="2"/>
    </svg>
</div>