Patternspiration

001230423

  • Twenty Nineteen

    Twenty Nineteen was really about not just another blogging theme. It could easily be used for a business or something else. This pattern takes that inspiration, creating a calling card. The avatar was key to this theme along with the crisp, minimal header and simple dividers.

    Pattern

    Your name in a card


    Something heading

    <!-- wp:group {"style":{"spacing":{"padding":{"bottom":"40px","top":"40px","left":"40px","right":"40px"}},"border":{"width":"1px"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group" style="border-width:1px;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:group {"layout":{"type":"constrained"}} -->
    <div class="wp-block-group"><!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"150px"} -->
    <div class="wp-block-column" style="flex-basis:150px"><!-- wp:image {"id":938,"width":100,"aspectRatio":"1","scale":"cover","sizeSlug":"medium","linkDestination":"none","style":{"border":{"radius":"100%"},"color":{}},"className":"is-style-rounded"} -->
    <figure class="wp-block-image size-medium is-resized has-custom-border is-style-rounded"><img src="https://patternspiration.com/wp-content/uploads/2021/10/image-from-rawpixel-id-3043165-jpeg-300x214.jpg" alt="" class="wp-image-938" style="border-radius:100%;aspect-ratio:1;object-fit:cover;width:100px" width="100"/></figure>
    <!-- /wp:image --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"textColor":"contrast","fontSize":"x-large","fontFamily":"source-serif-pro"} -->
    <h2 class="wp-block-heading has-contrast-color has-text-color has-source-serif-pro-font-family has-x-large-font-size" style="font-style:normal;font-weight:700">Your name in a card</h2>
    <!-- /wp:heading -->
    
    <!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#000000","className":"is-style-logos-only"} -->
    <ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"mytwitter.com","service":"twitter"} /-->
    
    <!-- wp:social-link {"url":"myfacebook.com","service":"facebook"} /-->
    
    <!-- wp:social-link {"url":"mylinkedin.com","service":"linkedin"} /--></ul>
    <!-- /wp:social-links --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns --></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"layout":{"type":"constrained"}} -->
    <div class="wp-block-group"><!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"150px"} -->
    <div class="wp-block-column" style="flex-basis:150px"></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"><!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"150px"} -->
    <div class="wp-block-column" style="flex-basis:150px"><!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"backgroundColor":"contrast"} -->
    <hr class="wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background" style="margin-top:var(--wp--preset--spacing--50)"/>
    <!-- /wp:separator --></div>
    <!-- /wp:column -->
    
    <!-- wp:column -->
    <div class="wp-block-column"></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    
    <!-- wp:heading {"level":4,"style":{"typography":{"fontStyle":"normal","fontWeight":"500"},"color":{"text":"#949494"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"fontSize":"large","fontFamily":"source-serif-pro"} -->
    <h4 class="wp-block-heading has-text-color has-source-serif-pro-font-family has-large-font-size" style="color:#949494;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);font-style:normal;font-weight:500">Something heading</h4>
    <!-- /wp:heading --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group -->

    Screenshot


Tags: