UHasselt Component Library

Post Message 

<div class='post-message'>
    <div class='post-message-title'>
        <span class="icon fas fa-plus-circle   " aria-hidden="true"></span>

        <h3 class="heading feed-header-title-text">
            Post een bericht
        </h3>
    </div>

    <form class="post-message-form" action="">
        <div class='paragraph feed-header-title-text'>
            <p>Geef je bericht een titel</p>
        </div>

        <span class="atm-form-input  ">
            <input type="text" name="input" id="input" placeholder="Placeholder" class="form-input" value="">
            <span class="icon far fa-times   form-input-error-icon" aria-hidden="true"></span>
            <span class="icon far fa-check   form-input-valid-icon" aria-hidden="true"></span>
        </span>

        <div class='paragraph feed-header-title-text'>
            <p>Je boodschap</p>
        </div>

        <textarea name="textarea" id="textarea" placeholder="placeholder" class="form-textarea "></textarea>

        <div class="post-message-submit">
            <button type="submit" href="#" class="button button-red ">
                <span>
                    <span class="text">
                        Posten
                    </span>
                </span>
            </button>

        </div>
    </form>
</div>
 
<div class='post-message'>
     <div class='post-message-title'>
        {{render '@icon' this.icon}}

        {{render '@heading' title}}
    </div>

    <form class="post-message-form" action="">
        {{render '@paragraph' this.paragraph-input}}

        {{render '@input'}}

        {{render '@paragraph' this.paragraph-textarea}}

        {{render '@textarea'}}

        <div class="post-message-submit">
            {{render '@button--red-submit'}}
        </div>
    </form>
</div>
 
{
  "title": {
    "text": "Post een bericht",
    "tag": "h3",
    "modifier": "feed-header-title-text"
  },
  "icon": {
    "icon": "fa-plus-circle",
    "style": "fas"
  },
  "paragraph-input": {
    "text": "Geef je bericht een titel",
    "tag": "h3",
    "modifier": "feed-header-title-text"
  },
  "paragraph-textarea": {
    "text": "Je boodschap",
    "tag": "h3",
    "modifier": "feed-header-title-text"
  }
}
  • Content: 
    .post-message {
    .post-message-title {
        display: flex;
        align-items: center;
        margin-right: 32px;
        margin-bottom: 8px;
        width: 100%;
        padding-bottom: 24px;
        margin-bottom: 32px;

        border-bottom: 1px solid #e3e3e3;

        .icon {
            @apply text-red;

            margin-right: 16px;
        }

        @screen md {
            flex-wrap: nowrap;
            margin-bottom: 32px;
            width: auto;
        }

        .feed-header-title-text {
            margin-bottom: 0;
        }
    }

    .post-message-form {
        display: flex;
        flex-direction: column;

        .form-input,
        .form-textarea {
            width: 100%;
        }

        .form-input,
        .form-textarea {
            margin-bottom: 32px;
        }
    }
}
  • URL: /components/raw/post-message/post-message.css
  • Filesystem Path: src\components\04-organisms\post-message\post-message.css
  • Size: 869 Bytes

No notes defined.