District Styles

  • DIV

    Normal

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    address

    menu list
    formatted
    definition term

Custom Styles

Blockquote

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id maximus urna, sit amet congue libero. Quisque viverra urna est.
    <blockquote style="padding: 0 0 0 15px; margin: 0 0 20px; border-left: 5px solid #C7CDD1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id maximus urna, sit amet congue libero. Quisque viverra urna est.</blockquote>

Shadow box

  • shadow box

    <p style="border: 1px solid; border-radius: 10px; padding: 15px; margin-bottom: 15px; box-shadow: #888888 5px 5px 2.5px;">shadow box</p>

Directory Information

    •  username@wcpss.net
    •  (919) 662-2379
    <ul style="list-style-type: none;">
    <li style="display: list-item;"><span class="bb-icon-ultra-mail staffcontenticon">&nbsp;username@wcpss.net</span></li>
    <li style="display: list-item;"><span class="bb-icon-ultra-phone staffcontenticon">&nbsp;(919) 662-2379</span></li>
    </ul>

Announcement

  • U
    Announcement
    <div style="display: flex; background-color: #bed600; padding: 10px; align-items: center; margin-bottom: 3px;">
    <div style="font-family: wake; font-size: 2em; padding: 10px; color: #00add0;">U</div>
    <div>Announcement</div>
    </div>

Button

  • <a href="#"><input style="width: 175px; padding: 10px; margin: 10px; font-family: 'Montserrat', sans-serif; font-size: 18px;" type="button" value="Button info" /></a>

Scholarship

  • Who is eligible?

    • >bulleted list<

    >additional narrative information<

    View Details

    Amount:

    >$ Amount or Varies<

    >Funding Description<

    Deadline:

    >Deadline<

    <div style="display: flex; flex-wrap: wrap; border-left: 5px solid #51b5e0; background-color: #51b5e011; padding: 15px 0;">
    <div style="flex: 1 1 66%; box-sizing: border-box; padding: 10px;">
    <p style="font-weight: bold; font-size: 110%; color: #51b5e0;">Who is eligible?</p>
    <ul style="list-style: square url('https://www.wcpss.net/cms/lib/NC01911451/Centricity/Domain/12060/checkmark_ltblue.png');">
    <li>><</li>
    </ul>
    <p style="margin: 15px;">><</p>
    <p style="margin: 25px;"><a style="font-size: 1.1 em; font-weight: bold; color: #51b5e0;" href=">>url here..." rel="noopener noreferrer">View Details</a></p>
    </div>
    <div style="border-left: 1px dotted #51b5e0; flex: 1 1 33%; box-sizing: border-box; padding: 10px;">
    <p style="font-weight: bold; font-size: 85%; color: #51b5e0;">Amount:</p>
    <p style="font-size: 110%; font-weight: 600;">><</p>
    <p>><</p>
    <p style="font-weight: bold; font-size: 85%; color: #51b5e0; margin-top: 25px;">Deadline:</p>
    <p style="font-size: 110%; font-weight: 600;">><</p>
    </div>
    </div>

Intro Paragraph with Drop Cap

  • LLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi quam, consectetur nec ligula non, pharetra tincidunt odio. Mauris et viverra tellus, id convallis tortor. Etiam ac risus vel magna ultrices tempor. Phasellus pretium metus vitae accumsan placerat. Vivamus justo magna, ullamcorper sit amet eros a, imperdiet pellentesque orci. Donec venenatis venenatis eros a ultrices. Aliquam efficitur eget nunc in dapibus. Nulla justo erat, dignissim sed pretium non, auctor sit amet lorem. Nulla in dolor dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent rutrum cursus leo, sit amet lobortis velit. Phasellus luctus nulla sed pharetra tincidunt. Pellentesque eget dui condimentum, convallis tortor eget, varius nunc. Praesent at ex dignissim, vestibulum quam id, gravida tellus. Etiam eget mi vel magna consectetur hendrerit sit amet a diam. Aenean tincidunt ullamcorper rhoncus.

    <div style="margin-bottom: 2em; font-size: 1.25em; line-height: 1.55em;">
    <p><span style="color: #243e90; float: left; font-weight: bold; font-size: 3em; line-height: 1em; padding-right: .1em; padding-left: .075em;">L</span>Lorem ipsum dolor...</p>
    </div>

HIghlight Box

  • Title

    Subtitle

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi quam, consectetur nec ligula non, pharetra tincidunt odio. Mauris et viverra tellus, id convallis tortor. Etiam ac risus vel magna ultrices tempor. Phasellus pretium metus vitae accumsan placerat. Vivamus justo magna, ullamcorper sit amet eros a, imperdiet pellentesque orci. Donec venenatis venenatis eros a ultrices. Aliquam efficitur eget nunc in dapibus. Nulla justo erat, dignissim sed pretium non, auctor sit amet lorem. Nulla in dolor dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent rutrum cursus leo, sit amet lobortis velit. Phasellus luctus nulla sed pharetra tincidunt. Pellentesque eget dui condimentum, convallis tortor eget, varius nunc. Praesent at ex dignissim, vestibulum quam id, gravida tellus. Etiam eget mi vel magna consectetur hendrerit sit amet a diam. Aenean tincidunt ullamcorper rhoncus.

     
     
    <div style="background-color: #e9252a11; padding: 2em 2em 0em 2em;">
    <h2><span style="color: #e9252a; text-transform: uppercase;">title</span></h2>
    <h3><span style="color: #e9252a;">subtitle</span></h3>
    <p>Lorem ipsum dolor...</p>
    </div>
    <div style="display: flex;">
    <div style="background-color: #e9252a11; width: 100%; height: 50px;">&nbsp;</div>
    <div style="width: 0; height: 0; border-top: 50px solid #e9252a; border-right: 50px solid transparent;">&nbsp;</div>
    </div>

Wake Font

  • A B C D E F G H I J K L M N O P Q R S T U V W X Y Z   1 2 3 4 5 6 7 8 9 0

    a b c d e f g h i j k l m n o p q r s t u b w x y z ! @ # $ % ^ & * ( )

    <p style="font-family: wake;">

    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z   1 2 3 4 5 6 7 8 9 0

    a b c d e f g h i j k l m n o p q r s t u b w x y z

    <p style="font-family: wake;">

Checklist

    • checklist
    <ul style="list-style-position: initial; list-style-image: url('/cms/lib/NC01911451/Centricity/Domain/2805/checkbox-sm.png'); font-size: 1.25em; line-height: 1.25em;">
    <li>checklist</li>
    </ul>

Content Header

  • Heading

    <h2 style="width: 100%; background-color: #fdb312; color: white; padding: 15px 0px 25px; 0px; text-align: center; clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 52% 80%, 50% 100%, 48% 80%, 0% 80%);">Heading</h2>

Faculty Entry

  • Ms. Smith

    Students with last name: Db-Go
    •  jsmith@wcpss.net
    •  (919) 662-2379 ext. #####
    <div style="display: flex; flex-flow: row wrap; justify-content: center;">
     <div style="display: flex; align-items: center; font-family: 'Open Sans', sans-serif; padding-bottom: 25px;">
     <div style="min-width: 75px; height: 75px; position: relative; overflow: hidden; border-radius: 50%; margin-right: 15px;"><img src="jsmith_tn.jpg" style="display: inline; margin: 0 auto; // margin-left: -25%; height: 75px; width: 75px;"></div>
     <div style="float: right;">
     <h3 style="border-bottom: 1px solid gray;">Ms. Smith</h3><span style="color: #51b5e0; font-weight: bold;">Students with last name: Db-Go</span>
     <ul style="list-style-type: none; margin-left: -25px;">
     <li style="display: list-item; font-family: 'Open sans';"><span class="bb-icon-ultra-mail staffcontenticon">&nbsp;</span>jsmith@wcpss.net</li>
     <li style="display: list-item;"><span class="bb-icon-ultra-phone staffcontenticon">&nbsp;</span>(919) 662-2379 ext. #####</li>
     </ul>
     </div>
     </div>
    </div><

  •